twitter-bootstrap 使用 javascript 禁用引导选择选项

disable bootstrap select option using javascript

提问by Alexander Chandra

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

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

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

我知道如何禁用“正常选择选项”，但是在使用引导选择时它不起作用（它被禁用/变灰但我仍然可以选择它）在这里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)

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

回答by D. Werle

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

如上所述这里，您需要更改选项的disabled属性后重新渲染选择选择器。

This should do the trick: (JSFiddle)

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

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

回答by Katie Isakadze

use jQuery

使用 jQuery

$("#dropdownBranch").attr("disabled", "disabled");

$("#dropdownBranch").attr("disabled", "disabled");

or the pure javascript one:

或纯 javascript 之一：

function disableDropdown(){
    document.getElementById("dropdownBranch").setAttribute("disabled", "disabled");
}

JSFiddle

JSFiddle

回答by Millar248

Yo. Don't you just $.("selectedSelect").css("disabled", "disabled");

哟。你不只是 $.("selectedSelect").css("disabled", "disabled");

Okay. I apologize for my lack of effort. I realize my answer was flippant, and I chose to work on it more. Edit:

好的。我为我的努力不足而道歉。我意识到我的回答是轻率的，我选择更多地研究它。编辑：

This is what I have come across on your jsfiddle. I am getting errors if I use .css, .val, .prop, or .attr. This is making me think that either jquery isn't working properly on jsfiddle for me, or I'm doing something wrong.

这就是我在你的 jsfiddle 上遇到的。如果我使用 .css、.val、.prop 或 .attr，我会收到错误消息。这让我认为 jquery 在 jsfiddle 上无法正常工作，或者我做错了什么。

I dug deeper. I looked at the html. In jsfiddle, a bootstrap combobox is created above the select tag. I edited the combobox li with the value of 3 to have the class "disabled", and the desired result was obtained.

我挖得更深。我看了看html。在 jsfiddle 中，在 select 标签上方创建了一个引导组合框。我编辑了值为 3 的组合框 li 以“禁用”该类，并获得了所需的结果。

This led me to this code:

这让我想到了这个代码：

function disableDropdown(){
    var selectobject, optionList;
    selectobject=document.getElementById("dropdownBranch")
    .getElementsByTagName("option");
    selectobject = $("li");
    selectobject[3].addClass("disabled");


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

}

What you need to do is access the bootstrap created element, and modify it to have the class disabled. Bootstrap should take care of the rest. I believe that you can do it in your own environment, but jsfiddle is annoying so I'm not going to continue working on this.

您需要做的是访问引导程序创建的元素，并修改它以禁用该类。Bootstrap 应该负责其余的工作。我相信你可以在你自己的环境中做到这一点，但 jsfiddle 很烦人，所以我不打算继续研究这个。

回答by threxx

Using renderas mentioned above is no longer the working. As written in their Docsrefreshis the method to use after changing options.

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

To programmatically update a select with JavaScript, first manipulate the select, then use the refresh method to update the UI to match the new state. This is necessary when removing or adding options, or when disabling/enabling a select via JavaScript.

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

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

回答by Jhay

Try this

试试这个

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

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

}

}