fieldset 的 disabled 属性仅对直接子元素生效，嵌套在 div 等非表单容器内的控件不受影响；需确保控件为 fieldset 直接子元素，或通过 JS 同步 disabled 属性并配合 CSS 实现完整禁用与无障碍支持。
fieldset disabled 为什么有时不生效
直接给 fieldset 加 disabled 属性，看似能禁用内部所有表单控件，但实际常遇到按钮仍可点击、input 仍可聚焦、甚至某些浏览器（如 Safari）下完全无反应。根本原因是：只有被 fieldset 直接包裹的表单元素才受其 disabled 影响；如果中间嵌套了 div、span 或其他非表单容器，那些子元素就“逃逸”了禁用逻辑。
常见错误写法：
<fieldset disabled>
<div>
<input type="text">
<button>提交</button>
</div>
</fieldset>
正确做法是确保所有需禁用的控件都为 fieldset 的**直接子元素**，或改用 JavaScript 补位。
如何让嵌套结构也响应 fieldset disabled
如果 UI 布局必须用 div 包裹控件（比如为了 flex 布局或样式隔离），fieldset 的原生 disabled 就失效了。此时不能靠 CSS 的 pointer-events: none —— 它只拦截鼠标，不阻止键盘焦点或表单提交。
立即学习“前端免费学习笔记（深入）”；
- 方案一：把
div换成legend或其他语义化内联容器（不推荐，破坏结构） - 方案二：用 JavaScript 监听
fieldset的disabled状态，主动同步到内部控件：document.querySelectorAll('fieldset[disabled] *:is(input, button, select, textarea)')并设disabled属性 - 方案三（推荐）：放弃纯 HTML 方案，改用 class 控制 + CSS + JS 组合，例如加
class="is-disabled"到fieldset，再用 CSS 规则fieldset.is-disabled input { pointer-events: none; opacity: 0.6; }，同时用 JS 批量设置disabled属性
disabled 对不同表单元素的实际影响差异
fieldset 的 disabled 并不是对所有子元素“一刀切”。它的行为取决于浏览器实现和元素类型：
-
input、select、textarea、button：会被真正禁用（不可交互、不提交值、失去焦点） -
label：本身不交互，但关联的控件若在fieldset内且直系，则一同禁用 -
legend：文字仍可显示，但无法触发任何事件（它不是表单控件） -
output、progress、meter：不受影响（它们不是可交互控件） -
custom element（如<my-input>）：除非显式监听并响应disabled，否则完全不受影响
兼容性与无障碍注意事项
IE11 和旧版 Edge 对 fieldset disabled 支持良好，但 Safari 在某些版本中对嵌套控件的禁用传播有延迟或遗漏。更重要的是：屏幕阅读器依赖 disabled 属性判断控件状态，若你用 CSS 遮盖但没设 disabled 属性，辅助技术会误判为“可用”，造成无障碍缺陷。
所以，哪怕视觉上用 opacity 和 pointer-events 做了遮罩，只要逻辑上该控件不该操作，就必须真实设置 disabled 属性——哪怕要靠 JS 补齐。
真正可靠的局部禁用，从来不是只靠一个 disabled 属性就能搞定的事。关键在控制链是否完整：HTML 结构 → 属性传播 → JS 同步 → CSS 呈现 → 辅助技术支持。漏掉任意一环，用户或机器就可能绕过你的“禁用”。
