必须同时调用 event.preventdefault() 并手动设置 event.target.checked = false，否则在 safari、旧版安卓 webview 或读屏器下会出错；change 事件比 click 更适合数量限制因其在状态切换完成后触发且支持非鼠标操作，但不冒泡需委托处理；动态列表应监听父容器 click 并精准过滤；服务端校验是必须项。
限制 checkbox 选中数量不能只靠 checked = false 或只写 return false，必须同时调用 event.preventDefault() 并手动重置 DOM 状态，否则在 Safari、旧版安卓 WebView 或读屏器下会出错。
为什么 change 事件比 click 更适合做数量限制
change 在 checkbox 真实状态切换完成后才触发，此时 event.target.checked 和 DOM 实际状态完全一致；它支持空格键、Tab+Enter、读屏器等非鼠标操作，语义更准确。但 change 不冒泡，无法直接委托到父容器——动态插入的复选框（如搜索结果、权限树）必须改用 click + 事件委托，或监听父级 change 后用 event.target.matches('input[type="checkbox"]') 过滤。
最稳的拦截写法：preventDefault + 强制回退
只设 event.target.checked = false 不阻止浏览器默认行为，在某些 WebView 中仍会闪动两次；只写 return false 或 event.preventDefault() 又不更新 DOM，用户看到“先打勾再消失”。正确组合是：
-
event.preventDefault()阻止浏览器默认勾选动作 -
event.target.checked = false强制 DOM 状态同步回退 - 统计已选项时，务必用
el.checked（JS 属性），别用:checked（CSS 伪类），后者在click触发瞬间还没更新
动态列表必须用事件委托，且过滤要精准
如果复选框是 JS 拉取后插入、或整个区块会 innerHTML 重绘，逐个绑定 addEventListener 容易漏绑、重复绑定、内存泄漏。推荐：
- 监听父容器（如
form或带id的div）的click事件 - 用
event.target.matches('input[type="checkbox"][data-limit]')精准匹配目标，支持不同组设不同上限（如data-limit="3"） - 查同组元素时，别依赖
name——多个表单可能共用 name；改用event.target.closest('.group-class').querySelectorAll('input[type="checkbox"]')
服务端校验不是可选项，是必须项。前端限制纯属体验优化，checked 状态能被 DevTools 直接改，表单也能绕过 JS 提交。后端收到数据后，必须重新统计并校验数量，不能信任前端传来的任何“已选中”标识。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
