引导多选插件并禁用/启用更改事件的复选框

Bootstrap Multiselect plugin and disabling/enabling checkboxes on the change event

本文关键字：启用 事件 复选框 插件      更新时间：2023-09-26

我正在使用引导多选来显示所选年份的最大计数可以为 4 的年份列表。即。如果选择了 4 年，则禁用所有未选择的年份;如果未选择某个年份进行计数 3，请再次启用所有年份。

（该插件项目的最新提交是添加启用/禁用功能，但我认为这不是针对单个选择元素 - https://github.com/davidstutz/bootstrap-multiselect/issues/171）

我的网页：

<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）

好的，我想出了一个解决方案。我在插件的当前主分支中添加了一个演示。看这里：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 个，则再次启用所有复选框。

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

我更改了他的代码，使其更通用/适用于任何多选。

它要求设置选择元素数据值"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');
        });
    }
}

最好有一个"最大允许"选项作为组件规范的一部分。 ;-）

相关文章：