我正在使用Bootstrap Multiselect来显示所选年份的最大数量为4的年份列表。即。如果选择了4年,则禁用所有未选择的年份;如果一年未被选中进行计数3,则可以再次启用这一年。
(该插件项目的最新提交是添加启用/禁用功能,但我不认为这是针对个别选择元素 - https://github.com/davidstutz/bootstrap-multiselect/issues/171)
我的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>
我的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);
});
}
});
然后我尝试使用一些插件的方法和示例。我尝试使用'全选'示例启用所有,我尝试使用'onchange'事件,但没有一个工作。
这是jsfiddle:http://jsfiddle.net/389Af/1/(注意我在上面的JS之前粘贴了插件JS)
答案 0 :(得分:7)
好的我想出了一个解决方案。我在插件的当前主分支中添加了一个演示。见这里: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');
});
}
}
});
一些解释:selectedOptions
是当前所选选项的数组。如果选择了4个或更多选项,则禁用所有其他复选框(不禁用不可见选择内的选项)。如果选择的选项少于4个,则会再次启用所有复选框。
答案 1 :(得分:3)
我将他的代码更改为更通用/适用于任何多选项。
它要求选择元素数据值&#34; max&#34;已设定。
<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');
});
}
}
拥有像#&#34; max-allowed&#34;这样的东西会很高兴。选项成为组件规范的一部分..; - )