index.html里怎样设置按钮的禁用状态？

最可靠方式是直接使用disabled属性。它能自动灰化按钮、阻止点击和表单提交，且全浏览器兼容；仅用CSS模拟禁用不可靠，JS操作应使用removeAttribute/setAttribute，框架中需传布尔值而非字符串。

直接使用 disabled 属性最为可靠

禁用 HTML 按钮时，最简单且兼容性最好的方式就是直接写入 disabled 属性。按钮会被浏览器自动置灰，同时点击和表单提交都会受到阻止；所有主流浏览器均支持这一方式，包括 IE11。

常见的错误是只添加样式（比如 opacity: 0.5 或 pointer-events: none），这种处理既无法阻止键盘触发（如回车），也不能中断表单提交，屏幕阅读器还无法正确识别。

• <button disabled>提交</button> —— 静态禁用会在页面加载后立即生效
• <button disabled="disabled">提交</button> —— 属于等价形式，属性值为任意非空字符串时均有效
• 不要写 disabled="false" 或 disabled="0"，因为这些写法在 HTML 中依旧代表禁用

使用JavaScript动态控制时，不要遗漏属性的移除

通过 JS 切换禁用状态，核心是直接操作 disabled 属性，而不是设置 disabled = false 这种布尔值，因为它只是 DOM 属性，并非 HTML 属性。

一个容易遇到的问题是：使用 element.disabled = false 之后，按钮表面上已经可以点击；但如果原始 HTML 写有 disabled，该属性仍然存在，下一次重新渲染或由服务端直出时便可能再次生效。

立即学习前端免费学习笔记（深入）；

• 启用按钮：btn.removeAttribute('disabled')（推荐）或 btn.disabled = false
• 禁用按钮：btn.setAttribute('disabled', '') 或 btn.disabled = true
• 检查是否处于禁用状态：btn.hasAttribute('disabled') 相比 btn.disabled 判断更准确，尤其是初始状态包含 disabled 时

在React/Vue等框架中要留意属性绑定方式

框架会将 disabled 作为受控 prop 处理，但其逻辑与原生行为相同：值为真（true、非空字符串）时禁用，值为假（false、null、undefined）时启用。

经常出现的错误是传入字符串 "false" —— 它在 HTML 中仍会被视为真值，所以按钮依然处于禁用状态。

• React：<button disabled={isSubmitting}>提交</button>，需要确保 isSubmitting 是布尔值
• Vue：<button :disabled="isSaving">保存</button>，原理相同，不要写 :disabled="'false'"
• 在 SSR 场景中，如果服务端首次渲染时 disabled 为 true，客户端 hydration 的状态必须与之相同，否则 React 不仅会发出警告，还可能覆盖当前状态

禁用状态还应结合视觉反馈与可访问性处理

只使用 disabled 属性仍不充分。各浏览器的默认样式存在差异（比如 Safari 不降低 opacity），屏幕阅读器也可能无法读出已禁用状态，因此还需额外处理。

• 通过 CSS 强制统一视觉样式：button:disabled { opacity: 0.6; cursor: not-allowed; }
• 为了对辅助技术更加友好，禁用时还应添加 aria-disabled="true"（注意它并非替代 disabled，而是作为补充）
• 当按钮逻辑较复杂（比如禁用状态取决于多个条件）时，不要把判断过程塞入模板，应先计算布尔值，再将其传给 disabled

实际项目最容易忽略的，是服务端渲染 + 客户端激活阶段的 disabled 状态同步；此外，禁用期间的用户误操作（比如快速连点）可能引起状态竞争。此时仅依靠属性无法解决，还需要配合 loading 状态与防抖。