disabled属性仅对input、textarea、select、option、optgroup、button、fieldset等原生可交互表单控件真正生效；对div、span、label、p等无效，浏览器直接忽略。
disabled 属性只对哪些元素真正生效
只有原生可交互表单控件才识别 disabled 属性：包括 input（所有 type）、textarea、select、option、optgroup、button、fieldset。给 div、span、label、p 加该属性完全无效，浏览器直接忽略。
常见错误现象：
-
<label disabled><input></label>——label不响应disabled，里面input依然可操作 -
<input disabled>—— 只要属性名存在就禁用，值是什么都不影响 -
<td disabled><input></td>——td不是表单控件，禁用无效；必须作用于内部的input等子元素
JavaScript 动态控制 disabled 的正确写法
别用 setAttribute('disabled', '') 或 removeAttribute('disabled')。前者语义不严谨，后者在部分旧版 Safari 中可能不触发 UI 重绘，导致视觉未更新但行为已改变。
正确做法是直接操作 DOM 属性：
- 禁用：
el.disabled = true - 启用：
el.disabled = false（注意：不能只删属性，必须显式赋false） - 检查状态：
if (el.disabled)，而非el.hasAttribute('disabled')（后者可能滞后）
在 Vue/React 中，仅改 DOM 的 .disabled 不同步响应式状态，下次 re-render 会覆盖；必须同时更新 data 或 state。
fieldset disabled 批量禁用的继承与失效点
<fieldset disabled></fieldset> 是最简洁的批量方案，浏览器会递归禁用所有子表单控件（包括嵌套 fieldset），但以下情况会导致失效或异常：
- 子控件显式写了
disabled=""或disabled="false"—— 多数现代浏览器仍以子元素显式声明为准，父级禁用被覆盖 -
label的for指向了fieldset外的控件 —— 点击label会绕过禁用逻辑 - 用了 Vue/React 封装的自定义组件，或 Shadow DOM —— 原生继承链断裂，禁用无法穿透
-
fieldset设置了display: flex或grid—— Safari 和 IE11 下部分子控件可能失去禁用样式（视觉灰显但焦点可入）
legend 文本不受影响，仍可聚焦、可读取；如需一并“屏蔽”，得额外加 CSS 或 JS 控制。
disabled 和 readonly 的关键区别与误用场景
两者都限制输入，但语义和行为完全不同：
-
disabled：控件不可交互、不聚焦、不触发input/change事件，且值绝不会出现在FormData或表单提交中 -
readonly：仅对input（text/search/tel/url/email/password/number）和textarea有效；用户能聚焦、能复制、值照常提交；对select、checkbox、radio完全无效
典型误用：
- 登录页用户名框设为
disabled，结果后端收不到用户名 —— 其实该用readonly - 想“显示但不让改”却用了
disabled，导致字段从提交数据中消失 - 给
select加readonly，毫无效果 —— 必须用disabled
禁用后容易被忽略的副作用：焦点不会自动移走，用户按 Tab 可能卡在已禁用元素上；应手动调 nextElement.focus()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
