2

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

Bhrungarajni
  • 2,415
  • 11
  • 44
  • 88

1 Answers1

2

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

Християн Христов
  • 3,372
  • 1
  • 13
  • 27
  • Thanks for answer, is there anyway to make those value labels also to be grayed out, i mean background color change? and how to enable it back? – Bhrungarajni Feb 24 '21 at 12:15
  • Check out the edit, anyways i think that you should do your own custom dropdown-select instead of using this plugin, because it seems kind of buggy. – Християн Христов Feb 24 '21 at 12:52
  • No tutorial ever includes jQuery on top of Angular (or if they do, they have no idea what they are doing). The solution to your problem is to use Angular, OR use jQuery, but not both at the same time. – Jeremy Thille Feb 24 '21 at 13:06
  • @ХристиянХристов in my case, i have used reactive forms, but i am not able to refresh the html based on disabled as true or false, any help on this? – Bhrungarajni Feb 25 '21 at 09:29
  • Do you call the following function `this.prepSelect();` as i do in the stackblitz that I've provided? – Християн Христов Feb 25 '21 at 09:38