如何以编程方式禁用选择下拉列表中的选择答案

【问题标题】：How to programmatically disable a choice in Chosen dropdown list如何以编程方式禁用选择下拉列表中的选择
【发布时间】：2016-02-19 20:25:09
【问题描述】：

我正在为 JQuery (https://harvesthq.github.io/chosen/) 使用 Chosen 插件，并且选择运行良好。但是我需要根据选择以编程方式禁用下拉列表中的某些选择，并且找不到任何可行的示例。例如，如果我选择“项目 1”，则应禁用“项目 2”。

我的下拉列表呈现的 HTML 是：

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

【问题讨论】：

提示：使用 $("#form_field").chosen().change( 设置禁用选项...);然后 $("#form_field").trigger("chosen:updated");
这里的技巧可以归结为像往常一样禁用该选项：disabled="disabled" 到该选项（选择您喜欢的任何方法）然后触发“选择：更新”（如建议的那样）由 vinayakj) 在表单上使其在选中时也可见。

标签： jquery jquery-chosen

【解决方案1】：

你不知道吗...我一发布问题就找到了正确的命令组合：

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

秘诀是在选项上设置“禁用”属性，然后触发选择更新。

【讨论】：