应改用外层容器包裹法或readonly+css模拟：容器绑定click事件并设置cursor: not-allowed和灰阶样式；readonly适用于input/textarea，允许点击且值参与提交，再配合禁用样式实现视觉禁用。
disabled按钮点不了，但需要响应点击怎么办
原生 disabled 会彻底阻断 click、focus、keydown 等所有交互事件，这是浏览器规范行为，不是 bug。如果业务上需要“视觉禁用但能点”，就不能用 disabled，得换思路。
推荐两种实操路径：
- 外层容器包裹：给
<div> 或 <code><span></span>绑定@click或addEventListener('click', ...)，内部<input disabled>只负责展示和样式；需手动加cursor: not-allowed和灰阶背景，否则视觉与行为不一致 - 改用
readonly+ CSS 模拟：仅适用于<input>和<textarea></textarea>；readonly允许聚焦、点击、选中文本，值也参与表单提交，再配合background-color: #f5f5f5; color: #999;实现视觉禁用 - 确认最终渲染出的是否为
<button disabled></button>，而不是<div role="button" disabled> —— 后者 <code>disabled属性无语义，CSSbutton:disabled完全不匹配 - 在 Vue 中，若组件封装了
<button></button>，必须显式把disabledprop 绑定到子<button></button>上：<button :disabled="$attrs.disabled"></button> - 在 React 中，自定义 Button 组件需用
props.disabled直接赋给原生<button></button>的disabled属性，不能只加 class 或aria-disabled - 避免在模板中写
disabled="{{ isDisabled }}"（字符串插值），应始终用绑定语法：:disabled="isDisabled"，否则isDisabled === false时会渲染成disabled="false"，依然禁用 - 用
setAttribute('disabled', 'true')禁用后，再用removeAttribute('disabled')启用 —— 在 Safari 旧版中可能失效，且无法保证与 DOM 属性同步 - 判断状态写
if (el.hasAttribute('disabled'))—— DOM 属性更新后，HTML attribute 可能滞后，应直接读el.disabled（返回布尔值） - 异步恢复时漏掉
.catch()分支：例如fetch().then(() => btn.disabled = false).catch(() => {})，请求失败后按钮永远卡死 - 多个函数反复设
btn.disabled = true，但只有一个地方负责恢复，导致状态残留 - DevTools Elements 面板里，鼠标悬停按钮，看右下角是否显示
:disabled状态被激活（Chrome 支持 Toggle element state） - 确认选择器匹配真实 DOM：如果是
<fieldset disabled><button></button></fieldset>，得写fieldset:disabled button，而非button:disabled - CSS 优先级被覆盖：检查是否有更具体规则（如
.btn-primary:disabled）或!important冲突；可用 DevTools 的 Computed 面板看哪条opacity最终生效 - 漏掉
cursor: not-allowed：仅靠透明度变化，用户悬停时仍是手型光标，体验断裂 - 用了
pointer-events: none覆盖：它会阻止所有事件，包括 focus 和屏幕阅读器交互，不符合无障碍要求，应避免
注意：readonly 对 <select></select>、<checkbox></checkbox>、<radio></radio> 无效，这类控件必须走容器包裹法或用 pointer-events: none（但后者破坏可访问性，慎用）。
Vue/React 中 disabled 状态不生效或被覆盖
框架里写 :disabled="isLoading" 很常见，但实际 DOM 没变灰、仍可点，大概率是状态没透传到底层原生元素。
检查点：
JS 动态控制 disabled 时的典型翻车点
el.disabled = true/false 是唯一稳定写法，其他方式都容易出问题。
高频错误：
安全写法示例：btn.disabled = !input.value.trim(); —— 表达式直赋，无分支遗漏风险。
button:disabled 样式不生效的硬核排查项
写了 button:disabled { opacity: 0.4; } 却没反应？别急着改框架，先看这几点：
真正可靠的禁用样式组合至少包含三要素：opacity（或明确色值）、cursor: not-allowed、outline: none（关闭焦点框干扰）。
