Question

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

我知道如何禁用“正常选择选项”，但是当使用bootstrap时选择它只是没有用（它禁用/灰色但我仍然可以选择它）这里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;
        }

}

我也尝试删除特定选项并发生相同的情况（正常下拉工作，但无法在bootstrap选择上工作）

Answer 1

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

这应该可以解决问题：(JSFiddle)

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

Answer 2

使用jQuery

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

或纯粹的javascript one：

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

JSFiddle

Answer 3

试试这个

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

}

Answer 4

哟。你不只是$。（“selectedSelect”）。css（“禁用”，“禁用”）;

好。我为自己缺乏努力而道歉。我意识到我的回答是轻率的，我选择了更多的工作。编辑：

这就是我在你的jsfiddle上遇到的。如果我使用.css，.val，.prop或.attr，我会收到错误。这让我觉得jquery对我来说在jsfiddle上运行不正常，或者我做错了什么。

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

这让我想到了这段代码：

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

}

您需要做的是访问bootstrap created元素，并修改它以禁用该类。 Bootstrap应该处理其余的事情。我相信你可以在你自己的环境中做到这一点，但是jsfiddle很讨厌，所以我不打算继续这个。

Answer 5

如上所述，不再使用render。正如他们的Docs refresh所写，是更改选项后使用的方法。

要以编程方式使用JavaScript更新选择，请先操作选择，然后使用refresh方法更新UI以匹配新状态。当删除或添加选项时，或者当通过JavaScript禁用/启用选择。

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

Answer 6

这是一个完整的“Jquery”版本：

  var your_value = 2;
  $('#userSelect').val('').change();
  $(`#userSelect option[value='${your_value}']`).prop('disabled', true);
  $('#userSelect').selectpicker('refresh');

使用javascript禁用bootstrap选择选项

6 个答案: