直接加 disabled 属性是最可靠的方式，适用于原生支持该属性的 button 和 input 元素，语义正确、无障碍友好且无需额外 CSS；错误做法是仅用 class="disabled" 模拟禁用。

直接加 disabled 属性是最可靠的方式

对 <button></button> 和 <input type="button"> 这类原生支持 disabled 的元素，直接写 disabled 属性即可禁用，浏览器会自动屏蔽点击、键盘交互，并降低透明度。这是语义正确、无障碍友好、且无需额外 css 的标准做法。

常见错误是只加 class="disabled" 却漏掉属性本身——这样按钮视觉上变灰了，但依然能被键盘 Tab 到、按 Enter 触发，对屏幕阅读器也不友好。

• <button type="button" class="btn btn-primary" disabled>提交</button> ✅ 正确
• <button type="button" class="btn btn-primary disabled">提交</button> ❌ 仅视觉禁用，功能未关闭
• <input type="button" class="btn btn-secondary" disabled value="取消"> ✅ 同样有效

.disabled 类只适用于不支持 disabled 的元素（比如 @#@#@#@#@#@#@#@#@#@0。这种写法不会触发跳转，鼠标悬停也无反应，但要注意：它无法阻止键盘聚焦（除非手动加 tabindex="-1"）。

• 用在 <a></a> 上：视觉+交互基本禁用，可接受
• 用在 <button></button> 上：多余，且掩盖真实状态，容易引发可访问性问题
• 若必须用 JS 动态控制，优先操作 element.disabled = true，而非增删 .disabled 类

JS 控制时别忘了同步更新 aria-disabled

当按钮状态由 JS 动态切换（比如表单校验后启用提交），光设 disabled 属性还不够。部分旧版读屏软件依赖 aria-disabled="true" 来播报禁用状态，尤其当按钮内容动态变化时。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 推荐写法：btn.disabled = true; btn.setAttribute('aria-disabled', 'true');
• 对应启用时也要清除：btn.disabled = false; btn.removeAttribute('aria-disabled');
• 不加 aria-disabled 不影响功能，但会影响残障用户对当前状态的感知

Bootstrap 5 中 .disabled 类已移除，别再混用

Bootstrap 5 官方文档明确废弃了独立的 .disabled 工具类。所有禁用逻辑回归原生语义——也就是说，现在只认 disabled 属性，CSS 样式由框架内部通过属性选择器 button:disabled 自动接管。

如果你在 Bootstrap 5 项目里还看到 class="disabled" 生效，大概率是旧 CSS 残留或自定义样式干扰，不是框架本意。

• 升级到 Bootstrap 5 后，删掉所有手动加的 .disabled 类
• 检查是否误引入了 Bootstrap 4 的 CSS 文件
• 用浏览器开发者工具看禁用按钮的 computed styles，确认生效的是 :disabled 伪类，而非类名匹配

禁用按钮这事，表面只是加个属性，但背后牵扯语义、可访问性和框架版本演进。最容易被忽略的，是 JS 动态控制时忘记同步 aria-disabled，以及在 Bootstrap 5 里还沿用老版本的 .disabled 类写法。