时间戳

首页 > 解决方案 > 仅禁用选中的复选框Angular 8

angular - 仅禁用选中的复选框Angular 8

问题描述

在此处输入图像描述**是否有机会在角度 8 中禁用 p-listbox 上的选定/检查项目？通过添加或在 CSS 上。当我尝试在被禁用的完整项目列表上添加 [disabled] 属性时，我希望仅禁用列表中已检查的那些项目。** 2

<div class="ui-g">
     <div class="ui-g-12 ui-md-6 ui-lg-2">
       <label>Fields</label>
     </div>
    <div class="ui-g-12 ui-md-6 ui-lg-6">
     <p-listbox *ngIf="!datasetLoader" [options]="mandatoryField" [(ngModel)]="selectedField" 
           [listStyle]="{'max-height':'150px'}" (onChange)="fieldSelection($event)" multiple="multiple" 
           formControlName="field" checkbox="checkbox" optionLabel="DisplayFieldName">
     </p-listbox>
    </div>
 </div>

标签： angulartypescriptangular8

解决方案

p-listbox 选项是primeng SelectItem接口的基础，并且SelectItem 接口有一个名为disable 的属性，如果它设置为true，则与该项目相关的选项将被禁用。

模板

<p-listbox [options]="cars" [(ngModel)]="selectedItems" 
          [listStyle]="{'max-height':'250px'}" multiple="multiple"
    (ngModelChange)="updateItems($event)" checkbox="checkbox">
</p-listbox>

零件

  updateItems(selectedItems:string[]) {
      selectedItems.forEach(v =>{
        let car = this.cars.find( c => c.value === v); 
        car.disabled = true; 
      })
    }

每次您选择一个项目时，我们都会将该选项禁用属性更新为 true

演示

推荐阅读