布尔属性只需写属性名，不可赋值；错误赋值如 disabled="false" 仍被识别为 true，导致表单失效、js 绑定异常、ssr 不一致及无障碍问题。
布尔属性写法错误会导致表单失效或 JS 绑定异常
直接写 disabled="false" 或 required="" 看似“关闭”了功能，实际浏览器仍当它是 true。因为 HTML5 规范明确：布尔属性只要存在（哪怕值为空字符串），就代表启用；只有完全不出现，才是禁用。
常见错误现象包括：required="" 在旧版 Safari 中可能被忽略，checked="0" 导致复选框始终未选中，disabled="disabled" 虽能工作但增加解析负担，且 Vue/React 的 SSR 渲染可能因语义歧义出错。
-
disabled、required、checked、readonly、multiple、novalidate是标准布尔属性，只写属性名即可 -
autocomplete、contenteditable、spellcheck不是布尔属性，必须带值，如autocomplete="off" - 不确定某个属性是不是布尔型？查 MDN 或 W3C 规范文档，别靠经验猜
JS 动态控制布尔属性时，别混用 setAttribute 和 DOM 属性赋值
用 el.setAttribute('disabled', '') 和 el.disabled = true 效果不同：前者只是添加属性节点，后者直接操作 DOM 属性，且会同步反映在 el.hasAttribute('disabled') 和 el.disabled 上。
更关键的是，某些框架（如 Vue 3 的响应式系统）监听的是 DOM 属性变化，而非 attribute 变化。若用 setAttribute 设置 checked，可能触发不了 v-model 更新。
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
- 推荐优先使用 DOM 属性赋值：
el.required = false、el.checked = true - 需要移除属性时，用
el.removeAttribute('disabled')，而不是el.setAttribute('disabled', 'false') - 动态生成 HTML 字符串时（如 innerHTML 拼接），仍需按规范写
disabled，不能写成disabled="true"
HTML 验证器报 warning 不是小事，它暴露语义风险
W3C 验证器对 required="required" 或 disabled="disabled" 标为 warning，不是“可忽略提示”，而是告诉你：这段 HTML 已偏离 HTML5 语义模型。这会影响无障碍工具（如屏幕阅读器）对控件状态的判断，也可能让 Lighthouse 的可访问性审计扣分。
尤其在 SSR 场景下，服务端渲染出 checked="checked"，客户端 hydration 时 React/Vue 可能因 DOM 属性与 JS 状态不一致而降级为 full re-render。
- 检查工具如 axe、Lighthouse 会把冗余布尔值当作“语义污染”标记
- 搜索引擎虽不直接惩罚，但结构化数据提取（如 Schema.org）依赖正确语义，错误写法可能降低 rich snippet 出现概率
- 团队协作中，统一用
disabled而非disabled="disabled"，能减少 code review 争议点
class 和 id 引号缺失会静默失败，但布尔属性写错值反而“看起来有效”
这是最容易被忽视的陷阱：布尔属性写错值（比如 required="false"）不会报错、页面也不崩溃，但逻辑已失效；而 class=header nav 这种漏引号写法，浏览器直接忽略整个 class 属性，CSS 和 JS 全挂掉——前者难 debug，后者一眼可见。
也就是说，布尔属性的错误更隐蔽，更容易在测试环境漏掉，上线后才暴露为“必填校验没生效”或“按钮点不动”这类问题。
- 所有属性值建议统一用双引号包裹，包括布尔属性的空值场景（虽然
required不需要引号，但保持风格一致更安全） - 用 Prettier + eslint-plugin-html 可自动修复大部分布尔属性误写
- CI 流程中加入
html-validate，能提前捕获checked="true"这类语义违规
disabled，而是它看起来正常运行，却在 SSR、a11y、框架绑定这些深层环节悄悄出错。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
