直接加disabled属性是唯一能同时禁用交互且不提交数据的方式；仅对input、textarea、select、option、optgroup、button、fieldset等原生表单控件生效，对div、span、label等无效；disabled与readonly语义不同，前者彻底禁用，后者仅禁编辑但保留聚焦和提交。
直接加 disabled 属性是唯一能同时实现“禁用交互”和“不提交数据”的方式，其他手段（如 readonly、pointer-events: none、CSS 灰显）都做不到这两点兼得。
哪些元素加 disabled 才真正生效
只有原生可交互的表单控件才识别该属性：
-
input（所有 type：text、email、checkbox、radio、submit、button 等） textarea-
select及其子元素option、optgroup button-
fieldset（会递归禁用内部所有子表单控件）
常见错误：给 div、span、label、p 加 disabled —— 浏览器完全忽略，既不变灰也不阻止点击或聚焦。
disabled 和 readonly 别混用
两者语义和行为完全不同，选错会导致提交异常或逻辑漏洞：
-
disabled：控件不可聚焦、不响应任何事件（click、input、change）、值绝不会出现在FormData或表单序列化结果中 -
readonly：仅对input（text/email/password 等）和textarea有效；允许聚焦、复制、Tab 进入，且值照常提交 -
readonly对select、checkbox、radio、button完全无效，写了也白写
典型误用：<select readonly></select> —— 页面看起来没变，用户仍可切换选项并提交。
JavaScript 动态控制必须用 .disabled = boolean
别用 setAttribute('disabled', '') 或 removeAttribute('disabled')，它们有兼容性和状态同步问题：
- 正确写法：
el.disabled = true（禁用），el.disabled = false（启用） - 错误写法：
el.setAttribute('disabled', 'false')—— 只要属性存在就禁用，值是什么无关紧要 - 检查状态必须用
if (el.disabled)，不能用el.hasAttribute('disabled')，后者可能滞后于真实 UI 状态 - 在 Vue/React 中，仅改 DOM 的
.disabled不会触发响应式更新，下次 re-render 会覆盖你的操作；必须同步更新data或state
用 fieldset 批量禁用时的坑
<fieldset disabled></fieldset> 是最简洁的批量方案，但以下情况会失效或异常：
- 子控件显式写了
disabled=""或disabled="false"—— 多数现代浏览器以子元素显式声明为准，父级禁用被覆盖 -
label的for指向了fieldset外的控件 —— 点击 label 会绕过禁用逻辑 - 用了自定义封装组件（如 Vue 的
<myinput></myinput>）或 Shadow DOM —— 原生继承链断裂，禁用无法穿透 -
fieldset设置了display: flex或grid—— Safari 和 IE11 下部分子控件可能视觉灰显但焦点仍可进入
legend 文本不受 disabled 影响，仍可聚焦、可读取；如需一并屏蔽，得额外加 CSS 或 JS 控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
