我尝试使用 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;
}
}
我也尝试删除特定选项,但发生了同样的情况(适用于正常下拉菜单,但不适用于引导选择)
如here所述,更改选项的禁用属性后,您需要重新渲染选择器。
这应该可以解决问题:(JSFiddle)
function disableDropdown(){
var selectobject;
selectobject = document.getElementById("dropdownBranch").getElementsByTagName("option");
selectobject[3].disabled = true;
$('#dropdownBranch').selectpicker('render');
}
使用jQuery
$("#dropdownBranch").attr("disabled", "disabled");
或者纯 JavaScript 的:
function disableDropdown(){
document.getElementById("dropdownBranch").setAttribute("disabled", "disabled");
}
使用上面提到的
render
不再有效。正如他们的Docs中所写,refresh
是更改选项后使用的方法。
要使用 JavaScript 以编程方式更新选择,首先操作 选择,然后使用刷新方法更新 UI 以匹配 新状态。当删除或添加选项时,或者当 通过 JavaScript 禁用/启用选择。
function disableDropdown(){
var selectobject;
selectobject = document.getElementById("dropdownBranch").getElementsByTagName("option");
selectobject[3].disabled = true;
$('#dropdownBranch').selectpicker('refresh');
}
这是一个完全可用的“Jquery”版本:
var your_value = 2;
$('#userSelect').val('').change();
$(`#userSelect option[value='${your_value}']`).prop('disabled', true);
$('#userSelect').selectpicker('refresh');
试试这个
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;
}
}
哟。你不只是 $.("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 很烦人,所以我不会继续研究这个。
要启用或禁用 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。