应使用click事件而非change事件动态限制多选按钮最大选择数，通过e.preventdefault()和手动设置target.checked=false拦截勾选，利用data-max和name属性实现分组独立控制，避免disabled导致的可访问性与样式问题。
点击时检查已选数量再决定是否允许勾选
限制多选按钮（<input type="checkbox">）最大选择数，核心逻辑不是禁用按钮，而是在每次 click 事件中动态判断：如果当前已勾选项已达上限，就立刻取消本次勾选。这样既保留交互反馈，又避免 DOM 状态错乱。
常见错误是只在 change 事件里处理，但用户快速连点时可能触发多次 change 或状态竞争；用 click 更可靠，且能第一时间拦截视觉变化。
- 监听所有 checkbox 的
click事件（委托或批量绑定） - 统计当前已勾选的同组元素数量（用
name或 class 区分组） - 若已达上限且当前点击的是未选状态，则调用
e.preventDefault()并设target.checked = false - 注意：不要直接
return false，它会阻止默认行为但不保证checked同步
用 name 属性分组 + dataset 标记最大值
不同多选组需独立限制，靠 name 区分最自然；把最大值存在 data-max 里，比硬编码或全局变量更灵活、可复用。
示例 HTML：
<div class="checkbox-group" data-max="2"> <label><input type="checkbox" name="fruit" value="apple"> 苹果</label> <label><input type="checkbox" name="fruit" value="banana"> 香蕉</label> <label><input type="checkbox" name="fruit" value="orange"> 橙子</label> </div>
JS 获取方式：
const group = e.target.closest('.checkbox-group');
const max = parseInt(group.dataset.max, 10) || 1;
const checkedCount = group.querySelectorAll('input[name="fruit"]:checked').length;
避免因 disabled 导致样式/焦点异常
有人习惯在达到上限后给剩余项加 disabled，但这会破坏键盘导航（Tab 键跳过）、影响屏幕阅读器，且视觉样式常难统一。更稳妥的做法是保持启用状态，仅拦截勾选逻辑。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
如果必须灰掉视觉，用 CSS 类代替 disabled：
.checkbox-group .max-reached { opacity: 0.6; cursor: not-allowed; }
// JS 中动态添加该 class，但不设 disabled 属性
-
disabled会让:checked伪类失效，导致样式规则错乱 - 移动端点击 disabled 元素可能无反馈，用户误以为没点上
- 若后续要动态释放限制（如删掉一个已选项），需同步清理
disabled和 class，容易遗漏
注意 change 和 click 事件的触发顺序差异
在 Chrome/Firefox 中，click 先于 change 触发；但 Safari 旧版本曾有例外。所以阻断逻辑必须放在 click 里，并手动修正 checked 状态，不能依赖 change 里再“撤回”——那时 UI 已闪动一次，体验割裂。
关键代码片段：
e.target.checked = false; e.preventDefault(); // 阻止默认勾选行为 // 不要用 e.stopPropagation() —— 可能影响外层事件委托
如果用了事件委托，确保 e.target 是 checkbox，且其 name 在目标组内；否则容易误拦其他控件。
复杂点在于：当用户 Shift+Click 连续选中多个时，浏览器不会逐个触发 click，而是批量更新。此时需监听 change 做兜底校验，但主逻辑仍以 click 为准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
