使用javascript禁用引导选择选项 [英] disable bootstrap select option using javascript

问题描述

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

I attempt to disable my specific bootstrap select option using javascript.

我知道如何禁用常规选择选项，但是在使用引导选择时它没有用（已禁用/灰色，但我仍然可以选择）
在这里 jsfidle

I know how to disable "normal select option", but when using bootstrap select it just didnt works (its disabled/greyed but i can still choose it) here 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;
        }

}

我也尝试删除特定选项并发生相同的情况（正常下拉菜单有效，但引导选择无效）

i try to remove specific option too and the same case happen (work on normal dropdown but not work on bootstrap select)

推荐答案

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

As described here, you need to re-render the select picker after changing the disabled property of an option.

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

This should do the trick: (JSFiddle)

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

这篇关于使用javascript禁用引导选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！