最可靠禁用按钮的方式是使用原生 disabled 属性，它能真正阻止交互、适配屏幕阅读器；避免仅用 css 模拟禁用，勿混用 aria-disabled，异步操作中需在 finally 块恢复状态。

直接用 disabled 属性最可靠

禁用按钮最简单、最标准的方式就是给 <button></button> 元素加上 disabled 属性。它会立刻让按钮变灰、不可点击、不触发 click 事件，且对屏幕阅读器友好。

常见错误是只加 CSS（比如 pointer-events: none 或 opacity: 0.5），这纯属视觉欺骗——按钮依然能被键盘聚焦、回车触发，甚至可能被表单提交。

• <button disabled>提交</button> —— 原生有效，无需 JS
• 动态禁用：用 JS 设置 btn.disabled = true，而不是操作 class 或 style
• 注意：<input type="submit"> 和 <input type="button"> 同样支持 disabled

disabled 和 aria-disabled="true" 别混用

disabled 是 HTML 原生属性，浏览器会接管行为；而 aria-disabled="true" 只是给辅助技术的提示，本身不阻止交互。两者语义和效果完全不同。

如果你已经用了 disabled，再加 aria-disabled 是冗余且可能引发读屏软件重复播报的。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• ✅ 正确：<button disabled>保存</button>
• ❌ 错误：<button disabled aria-disabled="true">保存</button>
• ⚠️ 仅当无法修改 DOM（如第三方组件禁用逻辑受限）时，才考虑用 aria-disabled + 手动拦截事件，但这属于兜底方案，不是首选

表单提交时临时禁用按钮防重复点击

用户手快连点两次“提交”，后端可能收到两条请求。单纯靠前端禁用按钮能缓解，但要注意时机和恢复逻辑。

关键点不是“点了就禁用”，而是“请求发出后立即禁用”，并确保无论成功或失败都恢复按钮状态（否则用户卡死）。

• 别在 click 回调开头写 btn.disabled = true，应放在 fetch() 或 axios.post() 调用之后
• 必须在 finally 块里重置 btn.disabled = false，否则网络失败或异常时按钮永远卡住
• 示例：

  btn.addEventListener('click', async () => {
    btn.disabled = true;
    try {
      await fetch('/api/save', { method: 'POST' });
    } finally {
      btn.disabled = false;
    }
  });

禁用状态下的样式自定义要小心

浏览器对 disabled 按钮有默认样式（如灰色、低透明度），可通过 :disabled 伪类覆盖。但某些 CSS 属性在禁用状态下行为不一致。

比如 background-color 能改，但部分浏览器会忽略 color 的设置；又比如 cursor: not-allowed 必须显式声明，否则有些系统仍显示默认指针。

• 推荐写法：button:disabled { opacity: 0.6; cursor: not-allowed; }
• 避免依赖 filter: grayscale() 等影响可访问性的属性
• 不要用 pointer-events: none 替代 disabled —— 它绕过了表单验证、焦点管理、辅助技术支持

实际项目里最容易漏掉的是异步失败后的按钮恢复，或者把 disabled 当成纯样式开关来用。禁用的本质是状态同步，不是视觉反馈。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！