嵌套 input 仍可点击提交，因 fieldset 的禁用递归仅对原生控件生效且依赖严格 dom 继承链；显式 disabled 属性、脱离 fieldset 子树、legend 内部、框架封装导致继承链断裂均使其失效。

为什么嵌套的 input 还能点、能提交

的禁用是递归的，但只对原生表单控件生效，且依赖严格的 DOM 继承链。失效不是“没递归”，而是被以下情况打断：

• input 显式写了 disabled="" 或 disabled="false" —— 只要 disabled 属性存在（无论值是什么），浏览器就认为它被显式禁用，此时父级 fieldset 的禁用状态不参与覆盖逻辑，而是“共存”：一个已禁用的控件，启用父级不会让它恢复
• 控件实际不在 fieldset 的 DOM 子树中：比如用了 display: contents 的 wrapper 包裹 input，导致 input 脱离了父子关系；或通过 position: absolute 移出但未脱离文档流，DOM 结构仍在，但某些旧引擎（如 Safari ≤ 15.6）会误判继承路径
• legend 内部的 input 永远不受禁用影响 —— 这是 HTML 规范强制行为，不是 bug。哪怕写成 <legend><input></legend>，该 input 依然可聚焦、可输入、值照常提交

Vue/React 里嵌套控件禁用失效的根本原因

框架封装后，原生继承链断裂是常态。比如：

• <myinput v-model="name"></myinput> 渲染出的底层 input 不在 fieldset 的直接子树中（可能被 <div>、<code><span></span> 或 Shadow Root 包裹）
• 即使 DOM 看似嵌套，React 的 createPortal 或 Vue 的 v-if/teleport 会让节点物理移出 fieldset 容器
• 自定义组件没透传 disabled prop 到底层 input，导致父级禁用信号无法触达

验证方式很简单：打开开发者工具，右键点击目标 input → “Reveal in Elements Panel”，确认它是否真正在 fieldset 标签下（而非外层 div 或 portal 容器内）。若不在，fieldset 的 disabled 就完全无效。

如何用 JS 准确判断某个 input 是否真正被禁用

仅靠 el.hasAttribute('disabled') 或 el.disabled 不够，因为：
• el.disabled === false 不能说明它可用（可能被父 fieldset 禁用）
• el.hasAttribute('disabled') 返回 false 时，它仍可能因父级 fieldset 失效

可靠方案是：

• 优先用 el.matches(':disabled') —— 返回 true 表示当前不可交互（含继承），现代浏览器全支持
• 兼容 Safari ≤ 15.3 或 IE 时，需手动向上遍历：
  function isTrulyDisabled(el) { if (el.disabled) return true; let p = el.parentElement; while (p && !(p instanceof HTMLFieldSetElement)) p = p.parentElement; return !!(p && p.disabled && !p.querySelector('legend')?.contains(el)); }

注意：这个函数必须排除 legend 内部的元素，否则误判。


魔搭社区
魔搭社区是一款AI学习资源工具，阿里达摩院推出的AI模型社区，超过300+开源AI模型。
下载

fieldset disabled 在嵌套 fieldset 中的边界行为

嵌套 fieldset 本身会被父级禁用影响，但它内部的控件是否禁用，取决于**最近一层启用的 fieldset**：
• <fieldset disabled><fieldset><input></fieldset></fieldset> → 内层 fieldset 被禁用，其子 input 不再受它控制，而是继承外层禁用 → input 确实禁用
• <fieldset disabled><fieldset disabled><input></fieldset></fieldset> → 无效：disabled="false" 是非法写法，属性存在即禁用；正确启用应写 <fieldset></fieldset>（无属性）或 el.disabled = false
• <fieldset><fieldset disabled><input></fieldset></fieldset> → 外层启用，内层禁用 → input 禁用，且仅由内层 fieldset 控制，外层状态无关

真正容易忽略的是：禁用状态不跨 legend 传播。哪怕你把整个 fieldset 包进另一个 fieldset，只要 input 在 legend 里，它就永远逃逸。

复杂点不在嵌套本身，而在 DOM 结构是否干净、框架是否透传、以及 legend 是否意外包裹了可交互内容。