直接在标签添加disabled属性即可禁用，无需值或引号；禁用后无法交互、不参与表单提交；js控制需用布尔值赋值，fieldset disabled可批量禁用原生控件。
多选框（input type="checkbox"）怎么加 disabled
直接在 <input type="checkbox"> 标签上写 disabled 属性就行，不需要值、不用引号、也不用写 disabled="true"。浏览器只要看到这个属性存在，就立刻禁用该控件。
常见错误是：
- 写成
disabled="false"或disabled=""—— 只要属性存在，就是禁用，""和"anything"效果一样 - 误以为给
<label></label>加disabled能禁用关联的 checkbox —— 不行，<label></label>本身不支持该属性，得作用在input上 - 用 CSS 的
pointer-events: none模拟禁用 —— 视觉上“点不动”，但键盘仍可聚焦、空格键仍能切换、表单提交时值照常发送
正确写法示例：
<input type="checkbox" name="agree" value="1" disabled> 我已阅读并同意条款
disabled 对多选框行为和数据的实际影响
禁用后不只是“点不了”，它会彻底切断交互链路和数据流：
- 无法鼠标点击、无法按空格键切换、无法 tab 进入焦点
-
input.checked读取仍返回当前布尔值（不会变），但用户无法修改它 - 表单提交时，该
input的name=value完全不会出现在 FormData 或序列化结果里 —— 这是 HTML 规范强制要求，不是浏览器差异 - 如果同时设了
checked和disabled，它会保持勾选状态（灰显），但用户不能取消勾选
对比 readonly：多选框根本不支持 readonly，写了也无效 —— 所以别试。
JS 动态控制 checkbox 的 disabled 状态
用 JS 开关禁用状态很常见，但几个细节容易出错：
- 设置必须用布尔值：
el.disabled = true或el.disabled = false，不是字符串 - 读取时
el.disabled返回true/false，不是属性是否存在 —— 即使 DOM 上没写disabled，JS 读出来也是false - 用
setAttribute('disabled', '')可以启用禁用，但必须用removeAttribute('disabled')才能解除；设成'false'或''都不行 - 如果是 Vue/React 渲染的 checkbox，确保 DOM 已挂载再操作，否则
el可能为null
示例：
const box = document.querySelector('input[name="notify"]');<br>box.disabled = true; // 禁用<br>if (box.disabled) { /* 确实禁用了 */ }
多个 checkbox 组合禁用时的注意事项
没有原生的“批量禁用”语法，但你可以用几种方式处理一组 checkbox：
- 逐个加
disabled属性 —— 最稳妥，兼容性无死角 - 用
<fieldset disabled></fieldset>包裹它们 —— 有效，但仅对原生input生效；如果里面混了自定义组件（比如 div 模拟的开关），那些不会被禁用 - 别依赖 CSS + JS 拦截事件来“模拟禁用” —— 键盘导航（Tab + 空格）大概率绕过，且屏幕阅读器无法识别语义，无障碍不达标
特别注意：如果某组 checkbox 共享同一个 name（如 name="hobby"），禁用其中部分项时，其他未禁用项的值仍会正常提交；禁用全部也不会导致 hobby 字段消失 —— 只有被禁用的个体才不出现在提交数据中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
