使用 javascript 禁用引导选择选项

Posted 2023-03-05

【中文标题】使用 javascript 禁用引导选择选项

【英文标题】：disable bootstrap select option using javascript

【发布时间】：2017-07-13 08:08:55

【问题描述】：

我尝试使用 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;
        

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

【参考方案1】：

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

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

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

【讨论】：

谢谢，这是工作，但这不适用于使用此patosai.com/projects/tree-multiselect 任何想法的树选择？

$('#dropdownBranch').selectpicker('refresh'); 对于 bootstrap-selectPicker 的更新版本要好得多

【参考方案2】：

使用 jQuery

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

或纯javascript：

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

JSFiddle

【讨论】：

我想要的是禁用特定的选择选项，而不是禁用选择（这将禁用所有选择选项）

哦，在这种情况下，请尝试添加此代码：selectobject=document.getElementById("dropdownBranch").getElementsByTagName("option"); selectobject[3].setAttribute("disabled");，然后再调用$('#dropdownBranch').selectpicker();

【参考方案3】：

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

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

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

【参考方案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;

【讨论】：

它不起作用，（这行错误我按下 selectobject.options[3].disabled=true;）

【参考方案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 很烦人，所以我不会继续研究这个。

【参考方案6】：

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

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