Skip to content
Advertisement

How to disable 2 options in multiselect dropdown and grayout that option

Hi i have used Angular8 and bootstrap 4. I have used bootstrap multi-select dropdown, i need to get the PL Marketing and CL Marketing as disabled and grayed out. i have tried in all ways but not able to disable and gray out that option.

TS:

  ngOnInit() {
    this.initEoForm();
    setTimeout(() => {
      $("#multiselectUser")
        .multiselect({
          buttonWidth: "400px"
        })
        .on("change", e => {
          let selectedFilename = $("#multiselectUser").val();
          selectedFilename = selectedFilename.filter(function(
            item,
            index,
            inputArray
          ) {
            return inputArray.indexOf(item) == index;
          });
          let selectedName = selectedFilename
            ? selectedFilename.toString()
            : "";
          this.getSelectedRoles(selectedName);
        });
    }, 100);
    setTimeout(() => {
      $('#assignedRoles option[value="124"]').prop("disabled", true);
      $('#assignedRoles option[value="123"]').prop("disabled", true);
    });
  }

HTML:

 <select name="user" id="multiselectUser" multiple="multiple" (change)="selecteduser($event)" [(ngModel)]="selectedUsers" >
              <option *ngFor="let field of user" [value]="field.id" >
                  {{field.label}}</option>
          </select>

DEMO

Advertisement

Answer

I would recommend instead of editing the UI with jQuery to modify the user[] that is visualized in the *ngFor and add a field called disabled. Then in your template you can do the following

 <select name="user" id="multiselectUser" multiple="multiple" (change)="selecteduser($event)" [(ngModel)]="selectedUsers" >
              <option *ngFor="let field of user" [disabled]="field.disabled" [value]="field.id" >
                  {{field.label}}</option>
          </select>

And your typescript should be changed like so

// From

   setTimeout(() => {
      $('#assignedRoles option[value="124"]').prop("disabled", true);
      $('#assignedRoles option[value="123"]').prop("disabled", true);
    });

// To

   setTimeout(() => {
      this.user = this.user.map(x => {
        return {
          ...x,
          disabled: [123, 124].includes(x.id)
        };
      });

Here is also a demo on stackBlitz (im using your example as base)

// Answer for the comments You can add a custom class like so and apply whatever styles you need

    <option *ngFor="let field of user" [ngClass]="{'disabled-option': field.disabled}"  [disabled]="field.disabled" [value]="field.id" >
                  {{field.label}}</option>

And in order to enable the options, you just have to iterate over the fields again and change the disabled state

** Important

Because you are using third party linrary for the select you must add you styles in the root .css files for them to take effect.

Also because of the library you are using you should re-initialized the select component in order for it to re-render the options with their new state.

Look again at the stackblitz i had provided

Advertisement