Bootstrap: Multiselect: Onchange 取消选中复选框答案

【问题标题】：Bootstrap: Multiselect: Onchange deselect the checkboxBootstrap: Multiselect: Onchange 取消选中复选框
【发布时间】：2018-05-11 06:39:29
【问题描述】：

我已经使用复选框实现了引导多选下拉菜单。

我想让用户只选择 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 事件？

【问题讨论】：

可以分享一下jsFiddler吗？
能否附上你的html代码？
这是一个 jsFiddler：jsfiddle.net/Lefdrx8z 但这里没有显示复选框。我不知道为什么...
@KrzysztofJaniszewski.. 这是 HTML 代码：<select name="template" id="template" style="font-family:arial;font-size:13px;height:30px;" multiple="multiple"> <option value="1">Abyss Premium</option> <option value="2">Accolade Premium</option> <option value="3">Allure</option> <option value="4">Allure Corporate</option> <option value="5">Ambiance Premium</option> <option value="6">Antique Premium</option> </select>

标签： javascript bootstrap-multiselect

【解决方案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>

【讨论】：