禁用 Angular 2 多选复选框答案

【问题标题】：Disable angular 2 multiselect checkboox禁用 Angular 2 多选复选框
【发布时间】：2021-12-06 08:53:50
【问题描述】：

我想知道是否有可能的方法来禁用多选下拉菜单中存在的某些复选框项目。多选有一个选项可以禁用整个下拉列表，但我想知道我们是否可以禁用特定的复选框。对于下面的代码，有没有办法禁用默认选中的复选框值。

import { Component, OnInit } from '@angular/core';

export class AppComponent implements OnInit {
dropdownList = [];
selectedItems = [];
dropdownSettings = {};
ngOnInit(){
    this.dropdownList = [
                          {"id":1,"itemName":"India"},
                          {"id":2,"itemName":"Singapore"},
                          {"id":3,"itemName":"Australia"},
                          {"id":4,"itemName":"Canada"},
                          {"id":5,"itemName":"South Korea"},
                          {"id":6,"itemName":"Germany"},
                          {"id":7,"itemName":"France"},
                          {"id":8,"itemName":"Russia"},
                          {"id":9,"itemName":"Italy"},
                          {"id":10,"itemName":"Sweden"}
                        ];
    this.selectedItems = [
                            {"id":2,"itemName":"Singapore"},
                            {"id":3,"itemName":"Australia"},
                            {"id":4,"itemName":"Canada"},
                            {"id":5,"itemName":"South Korea"}
                        ];
    this.dropdownSettings = { 
                              singleSelection: false, 
                              text:"Select Countries",
                              selectAllText:'Select All',
                              unSelectAllText:'UnSelect All',
                              enableSearchFilter: true,
                              classes:"myclass custom-class"
                            };            
}
onItemSelect(item:any){
    console.log(item);
    console.log(this.selectedItems);
}
OnItemDeSelect(item:any){
    console.log(item);
    console.log(this.selectedItems);
}
onSelectAll(items: any){
    console.log(items);
}
onDeSelectAll(items: any){
    console.log(items);
}

}

HTML

<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" 
[settings]="dropdownSettings" 
(onSelect)="onItemSelect($event)" 
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)"></angular2-multiselect>

【问题讨论】：

请也分享您的 HTML 代码
@DevangPatel 添加了 HTML 代码
您可以使用自定义模板并像这样禁用：npmjs.com/package/…

标签： javascript angular typescript multi-select

【解决方案1】：

在下拉列表中：您可以为要禁用的选项添加其他键，如下所示：
{ id: 1, itemName: 'India', disabled: true } 然后在 html 中使用这样的自定义模板：

<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" 
[settings]="dropdownSettings" 
(onSelect)="onItemSelect($event)" 
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)">
<c-badge>
<ng-template let-item="item">
  <label style="color: #333;min-width: 150px;">{{item.itemName}}</label>
  [disabled]="item.disabled"
</ng-template>
</c-badge></angular2-multiselect>

下面是工作示例：

https://stackblitz.com/edit/angular2-multiselect-dropdown-tsqghc?file=src%2Fapp%2Fapp.component.html

【讨论】：

嗨，我试过这样做，但我想要的是同时禁用和检查默认选择的数据。在您的代码中，它只是被禁用。我在您的代码中发现的另一个问题是，当我单击 selectAll 和 unSelectAll 时，该功能不起作用。

【解决方案2】：

您可以通过在选项中使用 : [disabled] 来禁用模板中的特定选项。例如：

<mat-form-field appearance="fill">
   <mat-label>Choose an option</mat-label>
   <mat-select [disabled]="disableSelect.value">
     <mat-option value="option1">Option 1</mat-option>
     <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
     <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

来自Angular Material Select

正如您在选项 2 中看到的那样，您有 "disabled" ，您可以将其更改为 input 并从您的列表中传递它，或者只为第一个选项设置 disabled 。

您可以添加 HTML 文件，然后我可以编辑和添加完整代码。

【讨论】：