Disable angular 2 multiselect checkboox-CodePudding

I would like to know if there is a possible way to disable certain checkbox items that is present in the multiselect dropdown. The multiselect has an option to disable the whole dropdown but I would like to know if we can disable particular checkboxes. For the below code, is there a way to disable the default selected checkbox values.

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>

CodePudding user response：

in dropdownList: you can add additional key to options you want to disable, like this:
{ id: 1, itemName: 'India', disabled: true } and then in html use custom Template like this:

<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>

Here is the working example:

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

CodePudding user response：

You can disable a specific options from the template by using : [disabled] inside the options. for example:

<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>

from Angular Material Select

as you can see in option 2 you have the "disabled" , you can change it to input and pass it from your list or just set disabled for the first option.

you can add the HTML file and then I can edit and add the full code.