Javascript 引导Multiselect插件和禁用/启用更改事件上的复选框

我使用来显示一个年份列表，其中所选年份的最大计数可以是4。即，如果选择了4年，则禁用所有未选择的年份；如果未选择某一年进行计数3，请再次启用所有年份

（该插件项目的最新提交是添加一个启用/禁用功能，但我不认为这是针对单个选择元素的-）

我的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>

然后我尝试使用插件的一些方法和示例。我尝试使用“全选”示例来启用all，我尝试使用“onchange”事件，但都不起作用

---

以下是JSFIDLE：（注意，我在上面的JS之前粘贴了插件JS）

好的，我想出了一个解决方案。我在插件的当前主分支中添加了一个演示。请参见此处：。代码如下所示。在此代码中，

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个，所有复选框将再次启用。

大卫的回答对我帮助很大。谢谢你

我将他的代码更改为更通用/适用于任何multiselect

它要求设置选择元素数据值“max”。

onChange:函数（元素）{
var me=$（元素），//是一个
parent=me.parent（），//是一个
max=parent.data（'max'），//在上定义
选项，//将包含
选中，//将包含
multiselect；//将包含生成的“.multiselect容器”
如果（！max）{//没有max设置，则忽略其余设置
返回；
}
//获取所有选项
options=me.parent（）.find（'option'）；
//获取所选选项
所选=选项。过滤器（函数（）{
return$（this）.is（':selected'）；
});
//获取生成的multiselect容器
multiselect=parent.sides（'.btn group'）.find（'.multiselect container'）；
//检查是否已满足所选选项的最大数量
如果（选定。长度===最大值）{
//满足最大值，因此禁用所有其他复选框。
options.filter（函数（）{
return！$（this）.is（':selected'）；
}).每个（功能）{
multiselect.find（'input[value=“”+$（this.val（）+”]））
.prop（'disabled'，true）
.parents（'li'）.addClass（'disabled'）；
});
}否则{
//尚未达到最大值，因此请启用所有禁用的复选框。
选项。每个（函数（）{
multiselect.find（'input[value=“”+$（this.val（）+”]））
.prop（'disabled'，false）
.parents（'li'）.removeClass（'disabled'）；
});
}
}

最好在组件规范中有一个“允许的最大值”选项；-）

$('#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');
        });
      }
    }
  });