disabled属性仅对原生表单控件（button、input、select、textarea、optgroup、option）生效，且不被fieldset禁用时才起作用；div、span等非表单元素忽略该属性。
disabled 属性生效的前提是：元素必须是可交互的表单控件，且不能被包裹在 fieldset 中禁用（或该 fieldset 自身未设 disabled）。
哪些元素支持 disabled 属性
只有原生表单控件才识别 disabled：包括 button、input（所有类型，如 text、checkbox、radio、submit 等）、select、textarea、optgroup、option。常见误区是给 div 或 span 加 disabled —— 它们完全忽略该属性，也不会变灰或阻止点击。
示例有效写法：
<input type="text" disabled><select disabled><option>A</option></select><button disabled>提交</button>
无效写法（无任何效果）：
<div disabled>这不会被禁用</div> <p disabled>段落也不行</p>
disabled 和 readonly 的关键区别
disabled 会让元素不可聚焦、不响应事件、不提交数据；readonly 只禁用编辑，但保留聚焦、事件响应和表单提交（仅对 input 和 textarea 有效）。
-
disabled元素的值 不会 包含在表单提交数据中（FormData或serialize()都跳过它） -
readonly元素的值 会 提交，只是用户不能改 -
disabled会触发浏览器默认样式（如灰色、cursor: not-allowed），readonly不一定 -
disabled对radio/checkbox也生效；readonly对它们无效（会被忽略）
JavaScript 动态设置 disabled 的正确方式
不要用 element.setAttribute('disabled', 'disabled') 或 element.setAttribute('disabled', '') —— 虽然多数浏览器能识别，但语义不严谨。应直接操作 DOM 属性：
input.disabled = true; // ✅ 推荐
input.disabled = false; // ✅ 推荐
// ❌ 不推荐（易出错，且无法通过 .disabled 读取布尔值）
input.setAttribute('disabled', 'disabled');
input.removeAttribute('disabled');
注意：disabled 是布尔属性，其存在即为 true，不存在即为 false；用 .disabled 属性读写最可靠。
fieldset 的 disabled 会批量影响子控件
给 fieldset 设置 disabled，其内部所有可禁用的表单控件（input、select 等）都会继承禁用状态 —— 即使它们自己没写 disabled。
但要注意两点：
- 子控件显式设
disabled=false也无法覆盖fieldset的禁用（DOM 层面强制继承） -
legend不受影响，仍可点击；若需禁用整个区域包括标题，得额外加 CSS 或 JS 控制
这个特性适合分组控制，比如“启用/禁用整套高级设置”，但容易忽略子控件无法单独恢复的问题。
真正容易被忽略的是：disabled 元素不会触发 focus、click、input 等事件，且无法通过键盘 Tab 进入 —— 如果你依赖事件监听来判断用户是否操作了某个字段，记得换思路，比如监听父容器或用 pointer-events: none + 自定义状态标记。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
