Bootstrap Multiselect：如何在onchange事件中限制最多选中3个复选框

你的思路没问题，但现有代码里有几个细节问题导致功能没生效，我帮你调整优化一下：

现有代码的问题点 #

1. 重复设置了includeSelectAllOption（先设true又设false，保留一个配置即可）
2. last_valid_selection变量定义在if内部，既没复用也没实际发挥作用
3. 修改checked属性后，没有通知Multiselect组件更新UI，导致视觉上还是显示选中状态
4. $(this)在onChange回调里的指向是Multiselect实例，不是原生select元素，操作对象不对

修正后的完整代码 #

$(function() {
  $('#template').multiselect({
    includeSelectAllOption: false, // 移除重复配置，按需调整为true
    enableCaseInsensitiveFiltering: true,
    numberDisplayed: 1,
    maxHeight: 250,
    onChange: function(option, checked, select) {
      // 仅在用户尝试选中新选项时检查
      if (checked) {
        const selectedTotal = $(select).find('option:selected').length;
        // 检查是否超过3个选中项
        if (selectedTotal > 3) {
          alert('抱歉，最多只能选择3个选项');
          // 取消当前点击的选项选中状态
          $(option).prop('checked', false);
          // 关键：通知组件刷新UI，同步实际选中状态
          $(select).multiselect('refresh');
        }
      }
    }
  });
});

关键改进说明 #

• 用回调参数select操作元素：这个参数是原生的<select>DOM元素，能准确获取选中数量，避免指向错误
• 强制刷新组件UI：调用multiselect('refresh')是核心，不然你修改了checked属性，下拉菜单的视觉状态不会同步更新
• 简化逻辑：直接基于选中后的数量判断，逻辑更清晰易懂

额外补充：如果开启全选按钮的处理 #

如果你需要保留includeSelectAllOption: true，还要处理用户点击全选的情况，避免一次性选中超过3个选项，可以加上onSelectAll回调：

onSelectAll: function(checked) {
  if (checked) {
    const allOptions = $(this).find('option');
    if (allOptions.length > 3) {
      alert('最多只能选择3个选项，将自动选中前3个');
      // 先取消所有选中，再选中前3个
      allOptions.prop('checked', false);
      allOptions.slice(0, 3).prop('checked', true);
      // 刷新UI同步状态
      $(this).multiselect('refresh');
    }
  }
}

这样就能完美实现你要的限制功能啦～

内容的提问来源于stack exchange，提问作者Trupti