使用 javascript 禁用引导选择选项

Question

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

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

}

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

Answer 1

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

这应该可以解决问题： （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 之一：

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

JSFiddle

Answer 3

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

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

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

Answer 4

尝试这个

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 5

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

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

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

我挖得更深。 我看了看html。 在 jsfiddle 中，在 select 标签上方创建了一个引导组合框。 我编辑了值为 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 应该负责其余的工作。 我相信你可以在你自己的环境中做到这一点，但 jsfiddle 很烦人，所以我不打算继续研究这个。

Answer 6

这是一个完全有效的“Jquery”版本：

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