只有原生表单控件（input、textarea、select、button、optgroup、option、fieldset）支持disabled属性，div、span、p、label等非表单元素添加该属性无效；fieldset设disabled会递归禁用其内子表单控件，但legend不受影响。
哪些元素能用 disabled 属性
只有原生表单控件才真正响应 disabled：包括 input、textarea、select、button、optgroup、option 和 fieldset。给 div、span、p 或 label 加 disabled 属性完全无效——浏览器直接忽略，既不变灰也不阻止点击。
特别注意：fieldset 上设 disabled 会递归禁用所有子表单控件（比如里面的 input 和 select），但它的 legend 不受影响；若要禁用整个区域含标题，得额外加 CSS 或 JS 控制。
disabled 的写法和常见错误
disabled 是布尔属性，存在即生效。正确写法是直接写 disabled，不带等号也不赋值：
<input type="text" disabled> <select disabled><option>A</option></select> <button disabled>提交</button>
以下写法全是错的：
立即学习“前端免费学习笔记（深入）”；
-
disabled="true"或disabled="false"—— 只要属性存在，就禁用，值是什么无关紧要 -
disabled=""—— 虽然多数浏览器能识别，但语义不严谨，易在旧环境出问题 - 给
input同时设readonly和disabled——disabled优先级更高，readonly被覆盖且无意义
JavaScript 动态控制 disabled 的正确姿势
别用 setAttribute 或 removeAttribute，直接操作 DOM 属性最可靠：
- 禁用：
el.disabled = true - 启用：
el.disabled = false - 检查状态：
if (el.disabled) { ... }
容易踩的坑：
- 脚本执行时 DOM 还没加载完，
document.getElementById()返回null→ 把脚本放</body>前，或用DOMContentLoaded包裹 - 在 React/Vue 中直接操作
.disabled会绕过响应式系统，导致 UI 和状态不一致 → 应该用disabled={bool}绑定数据 - 设为
false后仍无法交互？检查是否被父级fieldset的disabled强制继承，子元素显式设false也无效
disabled 和 readonly 到底怎么选
关键区别不在视觉，而在行为和数据流：
-
disabled：控件不可聚焦、不触发事件、**值不会提交**（FormData和表单序列化都跳过它） -
readonly：仅对input[type="text"]、input[type="email"]等文本类和textarea有效；用户不能编辑，但能聚焦、复制、**值照常提交**
典型误用场景：
- 登录页用户名框设成
disabled→ 后端收不到用户名 → 改用readonly - 想禁用
select却加了readonly→ 完全无效（HTML 规范不支持）→ 必须用disabled - 禁用
checkbox后仍需保留其checked状态供 JS 读取 →disabled允许读写.checked，只是拦截用户操作
禁用后元素的值彻底从表单数据中消失，这是 HTML 规范强制行为，前端任何 JS 操作都无法绕过。如果业务上需要“显示但不可改 + 必须提交”，readonly 或隐藏域才是正解。
