safari ≤15.4 中 fieldset[disabled] 继承不完整，导致 legend 内或 type="number" 输入框仍可点击或聚焦；需用 css pointer-events: none 或 js 兜底。
fieldset disabled 在 Safari ≤15.4 中为什么部分控件还能点
旧版 Safari（≤15.4）对 fieldset[disabled] 的继承逻辑有缺陷，尤其在 <legend></legend> 内部或 <input type="number"> 上表现异常：上下箭头仍可点击（虽不触发变更），<input> 也可能意外获得焦点。这不是 bug，而是规范实现不完整。
规避方式很简单：
- 避免把可操作控件（尤其是
<input>、<button></button>）直接写进<legend></legend>；改用<legend></legend>+ 独立表单区域的结构 - 对
<input type="number">，禁用时额外加 CSS：fieldset[disabled] input[type="number"] { pointer-events: none; } - 若必须支持 Safari ≤15.4，用 JS 检测并兜底：
if (navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')) { /* 手动遍历禁用子控件 */ }
IE11 和旧 Edge 对 fieldset disabled 的兼容边界
IE11 支持 fieldset[disabled]，但有两个硬伤：一是当 <fieldset></fieldset> 设置了 display: flex 或 display: grid，部分子控件视觉灰显但实际仍可聚焦；二是动态插入的 <fieldset></fieldset> 可能初始 disabled 属性读为 undefined，导致 JS 切换失效。
实操建议：
- 禁用区域的
<fieldset></fieldset>不要设弹性布局，保持默认display: block - 动态创建后，不用
el.setAttribute('disabled', '')，而用el.disabled = true强制触发状态同步 - 服务端渲染时，写成
<fieldset disabled></fieldset>比<fieldset disabled></fieldset>更稳妥，XHTML 兼容性更好
为什么 JavaScript 动态启用后某些 input 还是灰的
常见现象是 fieldset.disabled = false 执行了，但内部 <input> 仍不可编辑、光标还是 not-allowed。根本原因不是 JS 没生效，而是样式被覆盖或焦点残留。
排查重点：
- 检查是否写了类似
fieldset[disabled] input { opacity: 0.5; }的 CSS —— 它不会随 JS 启用自动清除，得配媒体查询或用:not([disabled])重置 - 禁用前若焦点在某个
<input>上，启用后焦点不会自动移出，键盘操作可能异常；需手动调用document.querySelector('fieldset').nextElementSibling?.focus() - Vue/React 场景下，仅改 DOM 的
disabled属性不够，组件 re-render 会把状态刷回旧值；必须同步更新组件 state 或用ref绑定
嵌套 fieldset 导致禁用失效的底层机制
fieldset[disabled] 的禁用是**单向继承**，无法被子 <fieldset></fieldset> 取消。比如外层 <fieldset disabled></fieldset> 包了一个未设 disabled 的内层 <fieldset></fieldset>，内层所有控件依然被禁用——浏览器根本不检查子 <fieldset></fieldset> 是否自己启用了，只看最近的禁用祖先。
这意味着：
- 想实现“大区禁用 + 小区启用”，不能靠嵌套
<fieldset></fieldset>，得拆出 DOM 结构，或用 JS 单独控制子控件的disabled属性 - 用
el.matches(':disabled')检测时，返回true只说明它当前行为禁用，但不等于它自身有disabled属性；要区分来源，得向上遍历el.parentElement直到找到带disabled的<fieldset></fieldset> - 无障碍测试中，屏幕阅读器会正确播报“该组已禁用”，但若嵌套结构混乱，可能跳过部分子控件的语义，建议用
role="group"+aria-disabled="true"做双保险
实际项目里最常被忽略的，是禁用后表单提交时字段值彻底消失——这和 readonly 有本质区别。如果业务要求“显示但不可改、且值必须传”，fieldset[disabled] 就不该用，得换方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
