Question

我正在使用JQuery的Chosen插件（https://harvesthq.github.io/chosen/）并且选择正常。但我需要以编程方式禁用基于选择的下拉列表中的某些选项，并且无法找到任何可行的示例。例如，如果我选择项目1＆＃39;，＆＃39;项目2＆＃39;应该被禁用。

我的下拉列表的呈现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>

Answer 1

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

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

秘密酱正在设置一个“禁用”＃39;选项属性，然后触发选择的更新。

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

1 个答案: