fieldset 的 disabled 属性会递归禁用其内部所有可交互表单控件（button、input、select、textarea、optgroup、option），但不包括 legend 和普通文本节点；legend 始终可聚焦且不可被禁用，禁用状态由浏览器自动同步至子控件的 disabled 属性，样式应使用 button:disabled 而非 fieldset:disabled button。
fieldset 的 disabled 属性到底禁用哪些元素
直接结论：fieldset 上设 disabled，会递归禁用其内部所有可交互的表单控件（button、input、select、textarea、optgroup、option），但**不包括 legend 和普通文本节点**。这是批量控制按钮状态最可靠的方式，前提是按钮必须是 fieldset 的直系或嵌套后代（不能被 div 等非表单容器隔开）。
常见错误现象：fieldset 加了 disabled，但按钮依然可点——大概率是按钮被包在了 div 里，而 div 不受 fieldset 的禁用继承影响；或者按钮用了 type="button" 却误写成 type="submit" 以外的其他值（其实不影响，只是容易混淆）。
- 必须确保按钮是
fieldset的后代，中间不能穿插非表单容器（如div、span） -
legend元素始终可聚焦、可选中，它不会被禁用，也不该用来触发操作 - 禁用后，浏览器自动为内部控件添加
disabled属性（可通过 JS 检查button.disabled为true），但 DOM 上不一定显式写出该属性
如何用 JavaScript 动态切换整组按钮的激活状态
核心就是操作 fieldset 的 disabled 属性，而不是遍历每个按钮。这样更轻量、语义正确，且能同步影响样式（比如 button:disabled 选择器会生效）。
示例：
const group = document.querySelector('fieldset#action-group');
// 启用整组
group.disabled = false;
// 禁用整组
group.disabled = true;
注意点：
- 不要用
group.setAttribute('disabled', '')，这会把值设为字符串空，而布尔属性应直接赋值true/false - 如果需要响应状态变化，监听
fieldset本身没事件，得靠轮询或封装 setter，或者监听子按钮的change/click并反向判断fieldset.disabled - 部分旧版 Safari 对
fieldset.disabled的样式继承有延迟，可加一句group.style.pointerEvents = 'none'强制屏蔽点击（仅作降级补救）
与 CSS 的 :disabled 伪类配合使用时的注意事项
fieldset:disabled button 这类选择器**无效**——CSS 规范明确指出 :disabled 伪类只匹配“自身可禁用”的元素（如 button），不匹配父元素。真正生效的是 button:disabled，它由 fieldset 的禁用行为自动触发。
所以样式应该这样写：
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
别写：fieldset:disabled button { ... }，它永远不会匹配任何元素。
- 若想给整个禁用区域加蒙层效果，需额外加一个绝对定位的
div，并用 JS 控制它的显隐（fieldset自身不支持背景遮罩） - 禁用状态下，
button的focus样式通常失效，若需保留视觉反馈，得用button:disabled:focus单独声明
替代方案对比：为什么不用 form 或 div 包裹
form 没有 disabled 属性，无法批量禁用；div 加 disabled 属性纯属无效 HTML，浏览器忽略，JS 读取 div.disabled 也是 undefined。
有人尝试用 aria-disabled="true" 配合 JS 手动拦截点击，问题在于：
- 屏幕阅读器支持不稳定，部分组合不识别
aria-disabled在容器上的语义 - 需要为每个按钮绑定事件监听，性能和维护成本高
- 无法自动触发原生
:disabled样式，必须额外写 CSS 规则
真正省事又合规的做法，就是老老实实用 fieldset —— 它是 HTML 原生支持的、语义准确的分组禁用机制，只要结构干净，基本没坑。
最容易被忽略的一点：如果 fieldset 里混入了非表单元素（比如一个 img 或 p），它们不会被禁用，但也不会干扰按钮的禁用行为；可一旦你往里面塞了个 contenteditable 的 div，它照样能编辑——fieldset.disabled 只管“表单控件”，不管“可编辑内容”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
