button.disabled = true 是唯一真正禁用点击区域的方式，它同步阻断交互、提交、焦点和可访问性；仅靠 pointer-events: none 或 opacity: 0.5 无法实现语义级禁用。
button.disabled = true 是唯一真正禁用点击区域的方式
仅靠 pointer-events: none 或 opacity: 0.5 样式不能算“禁用”——它不阻止键盘回车提交、不屏蔽屏幕阅读器播报、不防止事件委托捕获、也不影响表单序列化。浏览器原生的 disabled 属性才是语义级开关，会同时锁住交互、提交、焦点和可访问性状态。
设置方法只有两种等效写法：<button disabled></button>（HTML 属性存在即生效），或 JS 中 btn.disabled = true（DOM 属性赋值）。不要用 setAttribute('disabled', 'true')，它无法可靠启用/禁用，尤其在旧版 Safari 中会失效。
检查状态必须用 if (btn.disabled)，而不是 btn.hasAttribute('disabled')——后者只读 HTML 初始属性，不反映运行时变化。
fieldset disabled 能批量禁用原生表单控件，但有明确边界
fieldset 的 disabled 属性会递归作用于内部所有原生表单元素：<input>、<textarea></textarea>、<select></select>、<button></button>、<output></output>，前提是它们没显式声明自己的 disabled 或 readonly。
但它对以下情况完全无效：
- 自定义 Web Components（如 Lit/Vue 封装的输入框），其真实
<input>在 shadow DOM 内，父级disabled无法穿透 -
contenteditable="true"的<div> 或其他非表单元素 <li>通过 JavaScript 绑定的 <code>click/input事件，未主动检查fieldset.disabled - 显式写了
disabled=""或disabled="false"的子元素（只要属性名存在，就覆盖继承） - 心跳 URL 必须是同源路径（如
/api/health），避免跨域预检失败 - 后端 endpoint 需真实检查 DB 连通性、缓存状态等依赖项，不能只返回静态 200
- 必须用
AbortController控制超时（例如setTimeout(() => controller.abort(), 3000)） - 心跳间隔 ≥15 秒——太频繁易触发限流、耗电、CORS 预检失败
嵌套 fieldset 时，外层 disabled 会强制继承，内层无法“取消”——没有“启用子域”的机制。
网络断开时按钮禁用不能依赖 navigator.onLine
navigator.onLine 返回 true 并不等于后端可达。WiFi 通但 DNS 失效、代理拦截、服务挂掉时，它仍返回 true；飞行模式刚开启时又可能延迟 2–5 秒才触发 offline 事件，用户已点爆提交按钮。
真正要拦截的是「能不能拿到你的 API 响应」，必须用 fetch 心跳校验：
收到 online 事件后，按钮不能立刻启用；必须等待下一次心跳成功返回，才解除禁用，并加防抖和本地持久化状态，避免页面刷新后残留错误状态。
动态禁用按钮时最容易漏掉三件事
一是监听时机错：只用 onkeyup 会漏掉粘贴、自动填充、语音输入、拖拽文本等所有非键盘操作。必须用 input 事件，它覆盖全部值变更场景。
二是初始状态不校验：预填充内容不会触发 input 事件，DOMContentLoaded 后必须手动执行一次 btn.disabled = input.value.trim() === ''。
三是 DOM 未就绪就操作：AJAX 插入、框架组件（Vue/React）渲染的按钮，document.getElementById 可能返回 null。安全做法是先判空，或等对应生命周期（如 Vue mounted、React useEffect）再取 ref，绝对别用 setTimeout “碰运气”。
