![](/img/trans.png)
[英]How to enable/disable bootstrap option in select dropdown using javascript/jquery
[英]disable bootstrap select option using javascript
我嘗試使用 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;
}
}
我也嘗試刪除特定選項,並且發生了同樣的情況(在正常下拉菜單上工作,但在引導選擇上不起作用)
如上所述這里,您需要更改選項的disabled屬性后重新渲染選擇選擇器。
這應該可以解決問題: (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
不再有效。 正如他們的文檔中所寫, refresh
是更改選項后使用的方法。
要使用 JavaScript 以編程方式更新選擇,首先操作選擇,然后使用刷新方法更新 UI 以匹配新狀態。 在刪除或添加選項時,或者通過 JavaScript 禁用/啟用選擇時,這是必要的。
function disableDropdown(){
var selectobject;
selectobject = document.getElementById("dropdownBranch").getElementsByTagName("option");
selectobject[3].disabled = true;
$('#dropdownBranch').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 以“禁用”該類,並獲得了所需的結果。
這讓我想到了這個代碼:
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 很煩人,所以我不打算繼續研究這個。
這是一個完全有效的“Jquery”版本:
var your_value = 2;
$('#userSelect').val('').change();
$(`#userSelect option[value='${your_value}']`).prop('disabled', true);
$('#userSelect').selectpicker('refresh');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.