唯一可靠禁用按钮的方式是设置 button.disabled = true 或 HTML 的 disabled 属性；仅用 CSS 如 pointer-events: none 无法真正禁用，因不阻止键盘触发、表单提交、屏幕阅读器识别及事件委托捕获。
button.disabled = true 是唯一可靠禁用方式
仅靠 CSS 的 pointer-events: none 或 opacity: 0.5 不能真正禁用按钮：它不阻止键盘 Enter 触发、不阻断表单自动提交、不通知屏幕阅读器，且事件委托中仍会捕获到点击（需手动检查 event.target.disabled）。必须使用原生 disabled 布尔属性。
设置方法只有两种等效写法：<button disabled></button>（属性存在即禁用），或 JS 中 btn.disabled = true。移除时设为 false，不要用 removeAttribute('disabled')——后者在部分旧版 Safari 中有兼容问题。
button:disabled 伪类必须覆盖默认交互态
浏览器对 :disabled 元素只重置部分样式，不会自动清除你之前定义的 :hover、:active、:focus 效果。如果没显式覆盖，用户悬停时仍可能看到高亮边框或背景变化，造成“好像能点”的错觉。
正确做法是把禁用样式写全：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
button:disabled {
background-color: #ddd;
color: #999;
border: 1px solid #ccc;
cursor: not-allowed;
}
button:disabled:hover,
button:disabled:active,
button:disabled:focus {
background-color: #ddd;
outline: none;
box-shadow: none;
}
aria-disabled 不是替代，而是补充
disabled 属性本身已支持可访问性，但某些动态场景（比如用 class 模拟禁用）必须加 aria-disabled="true" 才能让屏幕阅读器识别状态。不过，只要用了真实 disabled，就不要同时写 aria-disabled——两者冲突时，部分读屏软件会优先采信 ARIA 属性，反而掩盖了原生语义。
以下情况才需要额外加 ARIA：
- 用
<div role="button"> 模拟按钮时 <li>禁用逻辑由 class 控制（如 <code>btn--disabled），且无法或不愿改用原生disabled
表单内禁用按钮不触发表单提交，但要注意事件委托
被 disabled 的 <button type="submit"></button> 点击时，既不会触发自身 click 事件，也不会提交父 <form></form>。这点很关键——别在禁用后还依赖 submit 事件做校验。
但如果在 <form></form> 上用事件委托监听 click，被禁用的按钮仍会冒泡上来，此时需主动判断：
form.addEventListener('click', (e) => {
if (e.target.matches('button[type="submit"]') && e.target.disabled) {
return; // 忽略禁用按钮的点击
}
// 处理有效提交
});
视觉反馈和行为控制必须同步；只改样式不设 disabled，或只设 disabled 却漏掉 :disabled:hover，都会让禁用状态显得不可靠。
