使用javascript禁用引导程序选择选项

Question

我尝试使用 javascript 禁用我的特定引导程序选择选项。

我知道如何禁用“正常选择选项”，但是当使用 bootstrap select 它只是没有用（它被禁用/灰色但我仍然可以选择它）在这里 jsfidle

 <select name="dropdownBranch" id="dropdownBranch" class="selectpicker" data-live-search="true">
  <option value="0">Choose Number</option>
    <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<select id="pureDropDown">
  <option value="0">Choose Number</option>
    <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<button onclick="disableDropdown()">disable</button>

function disableDropdown(){
var selectobject;
selectobject=document.getElementById("dropdownBranch").getElementsByTagName("option");
    selectobject[3].disabled=true;

selectobject=document.getElementById("pureDropDown").getElementsByTagName("option");
    for(z=0;z<selectobject.length;z++){
        selectobject[z].disabled=true;
        }

}

我也尝试删除特定选项并且发生相同的情况（在正常下拉菜单上工作但在引导选择上不起作用）

原文由 Alexander Chandra 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如此处 所述，您需要在更改选项的禁用属性后重新呈现选择器。

这应该可以解决问题： （JSFiddle）

 function disableDropdown(){
    var selectobject;
    selectobject = document.getElementById("dropdownBranch").getElementsByTagName("option");
    selectobject[3].disabled = true;
    $('#dropdownBranch').selectpicker('render');
}

原文由 D. Werle 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 render 如上所述不再有效。正如他们的 文档 中所写 refresh 是更改选项后使用的方法。

要使用 JavaScript 以编程方式更新选择，首先操作选择，然后使用刷新方法更新 UI 以匹配新状态。在删除或添加选项时，或者在通过 JavaScript 禁用/启用选择时，这是必需的。

 function disableDropdown(){
    var selectobject;
    selectobject = document.getElementById("dropdownBranch").getElementsByTagName("option");
    selectobject[3].disabled = true;
    $('#dropdownBranch').selectpicker('refresh');
}

原文由 threxx 发布，翻译遵循 CC BY-SA 4.0 许可协议