使用 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

如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 的：

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

JSFiddle

Answer 3

使用上面提到的

render

不再有效。正如他们的Docs中所写，

refresh

是更改选项后使用的方法。

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

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

Answer 4

这是一个完全可用的“Jquery”版本：

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

Answer 5

试试这个

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 6

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

好的。我为我的不努力而道歉。我意识到我的回答很轻率，所以我选择更加努力。编辑：

这是我在你的 jsfiddle 上遇到的。如果我使用 .css、.val、.prop 或 .attr，则会出现错误。这让我觉得要么 jquery 在 jsfiddle 上不能正常工作，要么我做错了什么。

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

这让我找到了这段代码：

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 7

要启用或禁用 Bootstrap SelectPicker，您可以使用 jQuery 的 .prop() 方法以及 SelectPicker 的刷新方法

禁用：

$(".selectpicker_fk_vendor_id").prop("disabled", true).selectpicker('refresh');

在这行代码中，$(".selectpicker_fk_vendor_id") 是一个 jQuery 对象，它表示要禁用的 SelectPicker 元素。代码的.prop("disabled", true) 部分将SelectPicker 的disabled 属性设置为true，从而将其禁用。代码的 .selectpicker('refresh') 部分刷新 SelectPicker 以确保更改生效。 启用

$(".selectpicker_fk_vendor_id").prop("disabled", false).selectpicker('refresh');

这行代码与上一行代码类似，只不过它将 SelectPicker 的disabled 属性设置为 false，从而启用它。同样，.selectpicker('refresh') 用于刷新 SelectPicker 以确保更改生效。

请记住将“.selectpicker_fk_vendor_id”替换为 SelectPicker 元素的实际类或 ID。