如何通过HTML实现点击按钮后自动禁用状态？

本文共计709个文字，预计阅读时间需要3分钟。

按按钮后立即禁用，是防止重复提交最直接有效的手段。关键不是能不能做，而是禁用时机是否正确和禁用后是否可恢复。

button.disabled = true 必须在事件处理函数开头执行

很多开发者把 disabled = true 放在异步操作（如 fetch）的 .then() 里，结果用户连点多次，请求照样发出去。真正要防的是「第一次点击触发后的那一瞬间」。

• 必须在 click 回调第一行就设 button.disabled = true
• 如果后续逻辑出错（比如网络失败），记得手动设回 false，否则按钮永远卡死
• 别用 setAttribute('disabled', 'true') —— 它不等价于 .disabled = true，尤其在表单提交中可能失效

禁用后需配合视觉反馈，否则用户会怀疑没点上

仅设 disabled 属性，浏览器默认样式往往不够明显，尤其在深色主题或自定义 UI 下。光靠属性无法保证用户感知状态变化。