jQuery Bootstrap Multiselect 插件和禁用/启用更改事件上的复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19476888/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Multiselect plugin and disabling/enabling checkboxes on the change event
提问by user982119
I'm using Bootstrap Multiselectto show a list of years where the maximum count of selected years can be 4. Ie. if 4 years have been selected, disable all the unselected years ; if a year has been unselected to make the count 3, enable all the years again.
我正在使用Bootstrap Multiselect来显示年份列表，其中所选年份的最大计数可以是 4。即。如果选择了 4 年，则禁用所有未选择的年份；如果未选择年份使计数为 3，则再次启用所有年份。
(The latest commit on that plugin's project was to add an enable/disable feature but I don't think that's for individual select elements - https://github.com/davidstutz/bootstrap-multiselect/issues/171)
（该插件项目的最新提交是添加启用/禁用功能，但我认为这不适用于单个选择元素 - https://github.com/davidstutz/bootstrap-multiselect/issues/171）
My HTML:
我的 HTML：
<select id="slYears" class="multiselect" multiple="multiple">
<option value="1" disabled="disabled">2009</option>
<option value="2" selected="selected">2010</option>
<option value="3" selected="selected">2011</option>
<option value="4" selected="selected">2012</option>
<option value="5" selected="selected">2013</option>
</select>
My JavaScript (first attempt):
我的 JavaScript（第一次尝试）：
$('#slYears').change(function () {
var arr = $(this).val().toString().split(',');
if (arr.length >= 4) {
$('#slYears option').each(function () {
if (!$(this).is(':selected')) {
$(this).prop('disabled', true);
}
});
}
else {
$('#slYears option').each(function () {
$(this).prop('disabled', false);
});
}
});
Then I tried using some of the plugin's methods and examples. I tried using the 'select all' example to enable all, I tried using the 'onchange' event, but none of it works.
然后我尝试使用一些插件的方法和示例。我尝试使用“全选”示例来启用所有，我尝试使用“onchange”事件，但没有一个有效。
Here is the jsfiddle: http://jsfiddle.net/389Af/1/(note I pasted the plugin JS before the above JS)
这是jsfiddle：http: //jsfiddle.net/389Af/1/（注意我在上面的JS之前粘贴了插件JS）
回答by David Stutz
OK I came up with a solution. I added a demo to the current master branch of the plugin. See here: http://davidstutz.github.io/bootstrap-multiselect/#further-examples. The code looks as follows. In this code the selecthas the ID example37:
好的，我想出了一个解决方案。我在插件的当前主分支中添加了一个演示。请参阅此处：http: //davidstutz.github.io/bootstrap-multiselect/#further-examples。代码如下所示。在此代码中select具有 ID example37：
$('#example37').multiselect({
onChange: function(option, checked) {
// Get selected options.
var selectedOptions = $('#example37 option:selected');
if (selectedOptions.length >= 4) {
// Disable all other checkboxes.
var nonSelectedOptions = $('#example37 option').filter(function() {
return !$(this).is(':selected');
});
var dropdown = $('#example37').siblings('.multiselect-container');
nonSelectedOptions.each(function() {
var input = $('input[value="' + $(this).val() + '"]');
input.prop('disabled', true);
input.parent('li').addClass('disabled');
});
}
else {
// Enable all checkboxes.
var dropdown = $('#example37').siblings('.multiselect-container');
$('#example37 option').each(function() {
var input = $('input[value="' + $(this).val() + '"]');
input.prop('disabled', false);
input.parent('li').addClass('disabled');
});
}
}
});
Some explanation: selectedOptionsis an array of the currently selected options. If 4 or more options are selected all other checkboxes are disabled (the options within the invisible select are not disabled). If less than 4 options are selected all checkboxes are enabled again.
一些解释：selectedOptions是当前选定选项的数组。如果选择了 4 个或更多选项，则所有其他复选框都将被禁用（不可见选择中的选项不会被禁用）。如果选择的选项少于 4 个，则会再次启用所有复选框。
回答by Aubrey
David's answer helped me a lot. Thanks for that.
大卫的回答对我帮助很大。感谢那。
I changed his code to be more generic/applicable for any multiselect.
我将他的代码更改为更通用/适用于任何多选。
It requires that the select-element data value "max" is set.
<select ... data-max="5"/>
它要求设置选择元素数据值“max”。
<select ... data-max="5"/>
onChange: function (element) {
var me = $(element), // is an <option/>
parent = me.parent(),// is a <select/>
max = parent.data('max'), // defined on <select/>
options, // will contain all <option/> within <select/>
selected, // will contain all <option(::selected)/> within <select/>
multiselect; // will contain the generated ".multiselect-container"
if (!max) { // don't have a max setting so ignore the rest
return;
}
// get all options
options = me.parent().find('option');
// get selected options
selected = options.filter(function () {
return $(this).is(':selected');
});
// get the generated multiselect container
multiselect = parent.siblings('.btn-group').find('.multiselect-container');
// check if max amount of selected options has been met
if (selected.length === max) {
// max is met so disable all other checkboxes.
options.filter(function () {
return !$(this).is(':selected');
}).each(function () {
multiselect.find('input[value="' + $(this).val() + '"]')
.prop('disabled', true)
.parents('li').addClass('disabled');
});
} else {
// max is not yet met so enable all disabled checkboxes.
options.each(function () {
multiselect.find('input[value="' + $(this).val() + '"]')
.prop('disabled', false)
.parents('li').removeClass('disabled');
});
}
}
It would be nice to have something like a "max-allowed" option to be part of the component specification.. ;-)
将“最大允许”选项作为组件规范的一部分会很好.. ;-)
