是，fieldset 的 disabled 属性能禁用其内原生表单控件（input/select/textarea/button/output），但不作用于自定义组件、div 包裹控件或动态添加元素；显式设置子控件 disabled 属性、DOM 结构异常或布局干扰（如 display: flex）会导致失效。
fieldset 的 disabled 属性是否真能禁用所有子控件
能，但仅限于原生表单控件（<input>、<select>、<textarea>、<button>、<output>），且必须是直接或间接嵌套在 <fieldset> 内的元素。自定义组件（如 Vue/React 封装的输入框）、<div> 包裹的控件、或通过 JavaScript 动态添加的控件不会自动继承禁用状态。
关键点在于：浏览器原生行为只作用于可聚焦、可提交的表单控件；disabled 是 <fieldset> 的布尔属性，无需赋值，写上即生效：
<fieldset disabled> <legend>用户信息</legend> <input type="text" name="name"> <select name="role"><option>管理员</option></select> </fieldset>
为什么给 fieldset 加 disabled 后某些 input 仍可操作
常见原因有三类：
-
<input>或其他控件被显式设置了disabled="false"或disabled=""（空字符串）——显式设置会覆盖<fieldset>的继承，必须彻底移除该属性 - 控件不在
<fieldset>DOM 子树中，例如用了position: absolute移出视觉范围但未脱离文档流，或用display: contents破坏了父子关系 - 使用了 Web Components 或框架封装，其内部根节点不是原生表单控件，无法响应
<fieldset>的禁用信号
disabled 在不同浏览器中的兼容性表现
现代浏览器（Chrome 10+、Firefox 4+、Safari 5.2+、Edge 79+）均支持 <fieldset disabled> 的完整继承行为。但注意两个细节：
立即学习“前端免费学习笔记（深入）”；
- Safari 15.4 之前，
<fieldset disabled>中的<input type="number">仍允许点击上下箭头（实际不触发变更，属 UI 残留），15.4+ 已修复 - IE11 支持该特性，但若
<fieldset>有display: flex或grid，部分子控件可能失去禁用样式（视觉上仍灰显，但焦点可入）——建议避免对<fieldset>设置弹性布局 - 禁用状态下，
<legend>文字默认变灰，但无统一规范；若需统一视觉，应额外加 CSS：fieldset[disabled] legend { opacity: 0.6; }
如何配合 JavaScript 动态控制 fieldset 的禁用状态
直接操作 disabled 属性即可，无需 setAttribute；禁用后，所有符合条件的子控件会同步失去交互能力与提交资格：
const fs = document.querySelector('fieldset');
// 禁用
fs.disabled = true;
// 启用
fs.disabled = false;
// 检查当前状态
if (fs.disabled) { /* ... */ }注意：修改 disabled 属性不会触发 change 或 input 事件，如需监听状态变化，得用 MutationObserver 监听 fieldset 元素的 disabled 属性变更，或自行封装 toggle 函数并主动触发自定义事件。
真正容易被忽略的是：禁用 <fieldset> 不影响其内 <input> 的 value 属性读写——你仍可通过 JS 获取或修改值，只是这些值不会随表单提交发送出去。
