禁用特定选项 bootstrap-multiselect
Disable a specific option boostrap-multiselect
问题
我想用 JS 禁用单个选项。我尝试使用以下代码:
var input = $('input[value="' + selectedPriLang + "Sec" + '"]');
input.prop('disabled', false);
input.parent('li').addClass('disabled');
有点用,但问题是我仍然可以使用 Select 全部按钮启用该选项。
另外,不确定是否相关,我在 onChange 中从不同的多选执行代码。
<select id="sel_secLang" multiple="multiple">
<option value="nlSec" disabled="disabled">Dutch</option>
<option value="enSec">English</option>
<option value="deSec">German</option>
<option value="FrSec">French</option>
</select>
希望这个解释足够清楚,第一个问题 ;D.
回答
虽然 Joe 的回答有效,但我自己尝试了,对于禁用:
var input = $('input[value="' + selectedPriLang + "Sec" + '"]');
input.prop('disabled', true);
var input2 = input.parent('label').parent('a').parent('li');
input4.removeClass('active');
input4.addClass('disabled');
启用:
var input = $('input[value="' + selectedPriLang + "Sec" + '"]');
input.prop('disabled', false);
var input2 = input.parent('label').parent('a').parent('li');
input2.removeClass('disabled');
只是输入的值
selectedPriLang = $('#sel_priLang option:selected').val();
您必须自己在更改处理程序中处理禁用的事件,并在选择 select-all 时取消 select 它们。一般来说,该过程可能如下所示:
- 捕获 selection 事件 select all
- 迭代元素
- 删除禁用元素的选中属性
捕获更改、查找禁用并取消选中它们的内容:
$('#sel_secLang').multiselect({
onChange: function(option, checked, select) {
$('input[type=checkbox]:disabled').each(checkbox, function(){
checkbox.attr('checked', false);
});
}
});
只是一个简短的说明来澄清:禁用相应的复选框并将 .disabled
class 添加到适当的 li
是不够的。您还必须禁用底层 option
。示例(也可以在documentation中找到):
<script type="text/javascript">
$(document).ready(function() {
$('#example-disable-javascript').multiselect({
includeSelectAllOption: true
});
$('#example-disable-javascript-disable').on('click', function() {
var input = $('#example-disable-javascript-container input[value="3"]');
var option = $('#example-disable-javascript-container option[value="3"]');
input.prop('disabled', true);
option.prop('disabled', true);
input.parent('label').parent('a').parent('li').addClass('disabled');
});
$('#example-disable-javascript-check').on('click', function() {
var options = '';
$('#example-disable-javascript option:selected').each(function() {
options += $(this).val() + ', ';
});
alert(options.substr(0, options.length - 2));
});
});
</script>
<div class="btn-group" id="example-disable-javascript-container">
<select id="example-disable-javascript" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-disable-javascript-disable" class="btn btn-primary">Disable an option!</button>
<button id="example-disable-javascript-check" class="btn btn-primary">Check</button>
</div>
问题
我想用 JS 禁用单个选项。我尝试使用以下代码:
var input = $('input[value="' + selectedPriLang + "Sec" + '"]');
input.prop('disabled', false);
input.parent('li').addClass('disabled');
有点用,但问题是我仍然可以使用 Select 全部按钮启用该选项。 另外,不确定是否相关,我在 onChange 中从不同的多选执行代码。
<select id="sel_secLang" multiple="multiple">
<option value="nlSec" disabled="disabled">Dutch</option>
<option value="enSec">English</option>
<option value="deSec">German</option>
<option value="FrSec">French</option>
</select>
希望这个解释足够清楚,第一个问题 ;D.
回答
虽然 Joe 的回答有效,但我自己尝试了,对于禁用:
var input = $('input[value="' + selectedPriLang + "Sec" + '"]');
input.prop('disabled', true);
var input2 = input.parent('label').parent('a').parent('li');
input4.removeClass('active');
input4.addClass('disabled');
启用:
var input = $('input[value="' + selectedPriLang + "Sec" + '"]');
input.prop('disabled', false);
var input2 = input.parent('label').parent('a').parent('li');
input2.removeClass('disabled');
只是输入的值 selectedPriLang = $('#sel_priLang option:selected').val();
您必须自己在更改处理程序中处理禁用的事件,并在选择 select-all 时取消 select 它们。一般来说,该过程可能如下所示:
- 捕获 selection 事件 select all
- 迭代元素
- 删除禁用元素的选中属性
捕获更改、查找禁用并取消选中它们的内容:
$('#sel_secLang').multiselect({
onChange: function(option, checked, select) {
$('input[type=checkbox]:disabled').each(checkbox, function(){
checkbox.attr('checked', false);
});
}
});
只是一个简短的说明来澄清:禁用相应的复选框并将 .disabled
class 添加到适当的 li
是不够的。您还必须禁用底层 option
。示例(也可以在documentation中找到):
<script type="text/javascript">
$(document).ready(function() {
$('#example-disable-javascript').multiselect({
includeSelectAllOption: true
});
$('#example-disable-javascript-disable').on('click', function() {
var input = $('#example-disable-javascript-container input[value="3"]');
var option = $('#example-disable-javascript-container option[value="3"]');
input.prop('disabled', true);
option.prop('disabled', true);
input.parent('label').parent('a').parent('li').addClass('disabled');
});
$('#example-disable-javascript-check').on('click', function() {
var options = '';
$('#example-disable-javascript option:selected').each(function() {
options += $(this).val() + ', ';
});
alert(options.substr(0, options.length - 2));
});
});
</script>
<div class="btn-group" id="example-disable-javascript-container">
<select id="example-disable-javascript" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-disable-javascript-disable" class="btn btn-primary">Disable an option!</button>
<button id="example-disable-javascript-check" class="btn btn-primary">Check</button>
</div>