Question

我已经使用复选框实现了bootstrap multiselect下拉列表。

我想让用户只选择3个选项或复选框。如果用户尝试选择3个以上，那么我想显示警告信息，不允许他们选择第4个选项。

以下是代码：

$(function() {
  $('#template').multiselect({
    includeSelectAllOption: true,
    enableCaseInsensitiveFiltering: true,
    numberDisplayed: 1,
    maxHeight: 250,
    includeSelectAllOption: false,
    onChange: function(option, checked, select) {
      if (checked == true) {
        var last_valid_selection = null;
        if ($('#template option:selected').length > 3) {
          alert('sorry');
          var $element = $(this);
          $($element).prop('checked', false);
        }
      }
    }
  });
});

如何进行多选下拉列表的onchange事件？

Answer 1

你几乎可以通过jQuery完全解决这个问题。基本思想是你的onChange处理程序将要查看select中所选选项的当前计数。如果选择的选项多于x，则使用

将禁用的属性添加到其他选项

$("#typeCheckboxSelect option:not(:selected)").prop('disabled', true);

否则，如果选择的选项少于x，那么您希望通过选择所有选项并禁用它们来确保没有禁用选项，使用

$("#typeCheckboxSelect option:disabled").prop('disabled', false);

请注意，在对基本选择html进行任何更改后，您将需要刷新多选项。

下面，我将上述说明的实施例放在一起。如果您对代码有任何疑问，请与我们联系。

var maxCount = 3;
$("#typeCheckboxSelect").multiselect({
  includeSelectAllOption: true,
  enableCaseInsensitiveFiltering: true,
  numberDisplayed: 1,
  maxHeight: 250,
  includeSelectAllOption: false,
  onChange: function(option) {
    //Get selected count
    var selectedCount = $("#typeCheckboxSelect").find("option:selected").length;
    //If the selected count is equal to the max allowed count (3 here), then disable any unchecked boxes
    if (selectedCount >= maxCount) {
      $("#typeCheckboxSelect option:not(:selected)").prop('disabled', true);
      $("#typeCheckboxSelect").multiselect('refresh');
      alert("Only allowed to select " + maxCount + " options.");
    }
    //If the selected count is less than the max allowed count (3 here), then set all boxes to enabled
    else {
      $("#typeCheckboxSelect option:disabled").prop('disabled', false);
      $("#typeCheckboxSelect").multiselect('refresh');
    }

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet" />


<select id="typeCheckboxSelect" multiple="multiple">
  <option value='test1'>Test One</option>
  <option value='test2'>Test Two</option>
  <option value='test3'>Test Three</option>
  <option value='test4'>Test Four</option>
  <option value='test5'>Test Five</option>
  <option value='test6'>Test Six</option>
</select>

Bootstrap：Multiselect：Onchange取消选中该复选框

1 个答案: