Set Some Specific Options in Multiselect as Disabled and Selected

const $selects = $(".products-combo");$selects.on('change', function(evt) {    // create empty array to store the selected values    const selectedValue = [];    // get all selected options and filter them to get only options with value attr (to skip the default options). After that push the values to the array.    $selects.find(':selected').filter(function(idx, el) {        return $(el).attr('value');    }).each(function(idx, el) {        selectedValue.push($(el).attr('value'));    });    // loop all the options    $selects.find('option').each(function(idx, option) {         // if the array contains the current option value otherwise we re-enable it.        if (selectedValue.indexOf($(option).attr('value')) > -1) {            // if the current option is the selected option, we skip it otherwise we disable it.            if ($(option).is(':checked')) {                return;            } else {                $(this).attr('disabled', true);            }        } else {            $(this).attr('disabled', false);        }    });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select class="products-combo" name="product[]">  <option>Select 1</option>  <option value="1">Product 1</option>  <option value="2">Product 2</option>  <option value="3">Product 3</option>  <option value="4">Product 4</option>  <option value="5">Product 5</option></select><select class="products-combo" name="product[]">  <option>Select 2</option>  <option value="1">Product 1</option>  <option value="2">Product 2</option>  <option value="3">Product 3</option>  <option value="4">Product 4</option>  <option value="5">Product 5</option></select><select class="products-combo" name="product[]">  <option>Select 3</option>  <option value="1">Product 1</option>  <option value="2">Product 2</option>  <option value="3">Product 3</option>  <option value="4">Product 4</option>  <option value="5">Product 5</option></select>

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

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

How to disable a specific option in select tag using chosen jquery

You can detect the change in the value, and iterate on all other options in case red is selected to disable them using .attr("disabled","disabled"); as follows:

$(document).ready(function(){     $('select').on('change', function(){          if(this.value == 'red'){               $('select option').map(function() {                    if($(this).val()!='red')                         $(this).attr("disabled","disabled");               });          }     })})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select>     <option>red</option>     <option>blue</option>     <option>yellow</option>     <option>green</option>     <option>whi te</option></select>

const pairs = [, 5, 6, , 1]; // 1=5, 2=6 5:1$(function() {  $(".selectpicker").selectpicker()  $(".selectpicker").on("changed.bs.select", function(e, clickedIndex, newValue, oldValue) {    // const selected = $("option:selected", this).map((i, ele) => ele.value).get();    $("option", this).prop("disabled", false); // enable all    $("option:selected", this).each(function() { // disable selected pair      const paired = pairs[$(this).val()];      if (paired) {        // if value i is among the selected, disable value pairs[i]        console.log("value", this.value, "disable", paired)        $(".selectpicker").find('option[value=' + paired + ']')          .prop("selected", false)          .prop("disabled", true);      }    });    // refresh the select    $('.selectpicker').selectpicker('refresh');  });});

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<select id="sel1" class="selectpicker" multiple>  <option value="1">One</option>  <option value="2">Two</option>  <option value="3">Three</option>  <option value="4">Four</option>  <option value="5">Five</option>  <option value="6">Six</option>  <option value="7">Seven</option></select>

$('select[name*="homepage_select"]').change(function(){


    // start by setting everything to enabled
    $('select[name*="homepage_select"] option').attr('disabled',false);

    // loop each select and set the selected value to disabled in all other selects
    $('select[name*="homepage_select"]').each(function(){
        var $this = $(this);
        $('select[name*="homepage_select"]').not($this).find('option').each(function(){
           if($(this).attr('value') == $this.val())
               $(this).attr('disabled',true);
        });
    });

});