Jquery – How to programmatically disable a choice in Chosen dropdown list

jqueryjquery-chosen

I'm using the Chosen plugin for JQuery (https://harvesthq.github.io/chosen/) and have selections working well. But i need to programmatically disable some choices in the dropdown based on selections, and can't find any workable examples. For example, if I select 'Item 1', 'Item 2' should be disabled.

The rendered HTML for my dropdown list is:

<div class="col-md-4">
          <label>Groups:</label>
          <select class="chosen-select" data-placeholder="Type to filter..." multiple="" style="display: none;">
          <optgroup class="depth-0" label="Group 1" data-index="-1">
            <option class="depth-1" value="Group 1" data-id="0" data-pid="-1">All items</option>
            <option class="depth-1" data-id="1" value="1" data-pid="-1">Item 1</option>
            <option class="depth-1" data-id="2" value="2" data-pid="-1">Item 2</option>
            <option class="depth-1" data-id="3" value="3" data-pid="-1">Item 3</option>
            <option class="depth-1" data-id="4" value="4" data-pid="-1">Item 4</option>
          </optgroup>
          <optgroup class="depth-0" label="Group 2" data-index="-2">
            <option class="depth-1" value="Group 2" data-id="0" data-pid="-2">All Items</option>
            <option class="depth-1" data-id="5" value="5" data-pid="-2">Item 5</option>
            <option class="depth-1" data-id="6" value="6" data-pid="-2">Item 6</option>
            <option class="depth-1" data-id="7" value="7" data-pid="-2">Item 7</option>
            <option class="depth-1" data-id="8" value="8" data-pid="-2">Item 8</option>
          </optgroup>
          </select>

          <div class="chosen-container chosen-container-multi" style="width: 2px;" title="">
          <ul class="chosen-choices">
          <li class="search-choice"><span>Item 1</span><a class="search-choice-close" data-option-array-index="2"></a></li>
          <li class="search-field"><input type="text" value="Type to filter..." class="" autocomplete="off" style="width: 25px;"></li></ul>

          <div class="chosen-drop">
          <ul class="chosen-results">
            <li class="group-result depth-0">Group 1</li>
            <li class="active-result group-option depth-1" data-option-array-index="1">All items</li>
            <li class="result-selected group-option depth-1" data-option-array-index="2">Item 1</li>
            <li class="active-result group-option depth-1" data-option-array-index="3">Item 2</li>
            <li class="active-result group-option depth-1" data-option-array-index="4">Item 3</li>
            <li class="active-result group-option depth-1" data-option-array-index="5">Item 4</li>
          <li class="group-result depth-0">Group 2</li>
            <li class="active-result group-option depth-1" data-option-array-index="6">All items</li>
            <li class="active-result group-option depth-1" data-option-array-index="7">Item 5</li>
            <li class="active-result group-option depth-1" data-option-array-index="8">Item 6</li>
            <li class="active-result group-option depth-1" data-option-array-index="9">Item 7</li>
            <li class="active-result group-option depth-1" data-option-array-index="10">Item 8</li>
          </ul>

          </div>
 </div>

Best Answer

Wouldn't you know...as soon as I post the question I found the right combination of commands:

var itemToDisable = $("option:contains('Item 2')");
itemToDisable.attr("disabled",true);
chosen_select.trigger("chosen:updated");

Secret sauce is setting a 'disabled' attribute on the option, and then triggering a Chosen update.

Related Topic