使用 javascript 禁用引导选择选项

问题描述 投票:0回答:7

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

}

我也尝试删除特定选项,但发生了同样的情况(适用于正常下拉菜单,但不适用于引导选择)

javascript html css twitter-bootstrap drop-down-menu
7个回答
9
投票

here所述,更改选项的禁用属性后,您需要重新渲染选择器。

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

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

2
投票

使用jQuery

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

或者纯 JavaScript 的:

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

JSFiddle


2
投票

使用上面提到的

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

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

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

1
投票

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

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

0
投票

试试这个

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

}


0
投票

哟。你不只是 $.("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 很烦人,所以我不会继续研究这个。


0
投票

要启用或禁用 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。

© www.soinside.com 2019 - 2024. All rights reserved.