直接加 disabled 属性即可禁用按钮，它会阻止点击、聚焦和表单提交，但需手动适配样式与可访问性，且仅原生表单控件支持，JavaScript 应通过 element.disabled 读写而非 setAttribute。
直接加 disabled 属性就能禁用按钮，但要注意它不触发点击事件、不提交表单、且样式需手动适配。
怎么给按钮加禁用状态
在 <button> 或带 type="submit"/"button" 的 <input> 上写 disabled 属性即可，布尔属性，无需赋值：
<button disabled>提交</button> <input type="submit" value="登录" disabled>
浏览器会自动阻止用户交互：不能点击、不能聚焦、不会触发表单提交或 click 事件。注意：不是所有元素都支持 disabled，只有表单控件（button、input、select、textarea、optgroup、option）原生支持。
JavaScript 动态控制 disabled 状态
用 element.disabled 属性读写，它是可读写的布尔值：
立即学习“前端免费学习笔记（深入）”；
-
btn.disabled = true禁用；btn.disabled = false启用 - 不要用
btn.setAttribute('disabled', '')或removeAttribute，容易出错——DOM 属性和 HTML 属性语义不同 - 检查是否禁用别用
hasAttribute('disabled')，应直接读btn.disabled，更可靠
示例：
const btn = document.querySelector('#save-btn');
btn.addEventListener('click', () => {
if (btn.disabled) return; // 防双重提交，但更推荐在逻辑里控制
btn.disabled = true;
// 发送请求...
});
禁用按钮的样式和可访问性问题
浏览器默认会让禁用按钮变灰、降低透明度，但实际效果依赖 UA 样式，且不保证对比度达标。必须手动补充 CSS：
- 用
button:disabled或button[disabled]选择器覆盖样式 - 确保文字颜色与背景满足 WCAG AA 对比度（至少 4.5:1）
- 禁用状态下仍需保留
aria-disabled="true"（对非原生控件如<div role="button">必须加） - 不要仅靠样式“看起来禁用”而漏掉
disabled属性——屏幕阅读器和键盘用户依赖该属性判断是否可操作
常见踩坑点
disabled 是表单控件的原生行为，不是 CSS 类或 JS 模拟，绕不开它的底层限制：
- 禁用的
<button>不会出现在表单的FormData中，也不会被form.submit()提交（即使它在 form 内） - 设置
disabled后，focus()调用无效，也不能通过 Tab 键聚焦 - React/Vue 等框架中，用
disabled={isSubmitting}绑定没问题，但别写成disabled={isSubmitting ? '' : null}——空字符串仍是 truthy，会被当作启用 - 服务端渲染时若初始就禁用，务必同步输出
disabled属性，否则首屏可能闪烁或可误点
真正关键的是：禁用状态必须反映真实业务约束，而不是只藏一个 if 判断在 click 里。用户看到“不可点”，就得真的不可点、不可提交、不可聚焦——少一个环节，就多一个绕过逻辑的入口。
