布尔属性只需存在即生效,不写等号和值;如checked、disabled、required等,存在为true,缺失为false,写成checked="true"或disabled="false"属错误用法。

布尔属性不写等号和值才真正生效
HTML5 规范明确要求:布尔属性(如 checked、disabled、required、readonly、open)只要存在,就代表 true;不出现,就是 false。写成 checked="true" 或 disabled="false" 是无效甚至错误的——浏览器会忽略值,但语义上已违背规范。
常见错误现象包括:
-
required=""看似“空值”,实际仍被当作true(因属性存在) -
checked="0"或disabled="disabled"属于冗余旧写法,现代 HTML5 不推荐 -
autocomplete="off"不是布尔属性,不能简写;它属于枚举属性,必须带值
哪些属性是布尔属性,哪些不是
不能靠感觉判断。必须查规范或 MDN,否则容易把非布尔属性也“简写”。例如:
- ✅ 是布尔属性:
checked、disabled、required、readonly、open、hidden、multiple、novalidate - ❌ 不是布尔属性:
autocomplete、draggable、contenteditable、spellcheck—— 它们虽接受布尔语义值("true"/"false"),但必须显式赋值,且允许其他值(如autocomplete="email")
一个快速验证法:打开 Chrome DevTools → Elements 面板 → 右键元素 → “Edit as HTML”,删掉某个属性后观察行为是否变化。如果删了就失效,那它大概率是布尔属性。
立即学习“前端免费学习笔记(深入)”;
JavaScript 操作布尔属性要区分 content attribute 和 IDL attribute
DOM 中的属性操作容易踩坑。比如:
- 用
element.setAttribute('checked', '')能让复选框视觉上选中,但element.checked仍为false(因为没同步 IDL 属性) - 正确做法是直接赋值 IDL 属性:
element.checked = true,而不是操作 HTML 字符串 - 动态插入的
<input type="checkbox" checked>元素,若未挂载到 DOM 就调用.setAttribute(),可能不触发渲染更新
简单记:HTML 写 checked 控制初始状态;JS 改 .checked 控制运行时状态。
服务端模板或校验工具对布尔属性更敏感
本地浏览器宽容,但某些环境会严格校验。比如:
- HTML 验证器(validator.w3.org)会警告
checked="true"为“非标准值” - Next.js / Astro 的 SSR 渲染若输出
disabled="false",会导致 hydration mismatch 错误 - 部分 CMS 或低代码平台在解析模板时,把空字符串
required=""当作未设置,跳过校验逻辑
最稳妥的写法永远是:只写属性名,不加等号、不加引号、不加值 —— required,disabled,open。



















