按钮禁用后点击事件仍触发，因disabled仅阻止默认行为而不移除javascript事件监听器，需在事件处理中手动检查button.disabled状态；动态控制应直接赋值disabled布尔属性，避免setattribute；禁用按钮的value不参与表单提交。
按钮禁用后为什么点击事件还触发？
因为 disabled 只阻止默认行为（如表单提交、按钮聚焦），但不自动移除绑定的 JavaScript 事件监听器。即使按钮灰显，click 事件仍可能被触发——尤其在事件委托场景下。
正确做法是检查状态再执行逻辑：
button.addEventListener('click', () => {
if (button.disabled) return;
// 实际业务逻辑
});
-
disabled是布尔属性，写上即生效，无需赋值：<button disabled></button>✅，<button disabled></button>❌（这反而会启用） - 禁用后按钮无法获得焦点，也不能被键盘
Enter或Space触发 - 若用 CSS 强制覆盖样式（如
pointer-events: none），会破坏可访问性，且不等价于disabled
如何动态启用/禁用按钮？
用 JavaScript 操作 disabled 属性最可靠：
button.disabled = true; // 禁用<br>button.disabled = false; // 启用
- 不要用
button.setAttribute('disabled', 'disabled')或.removeAttribute('disabled')，容易出错（比如多次设属性导致冗余） - 避免直接操作
innerHTML来切换状态——会丢失事件监听器和已有状态 - React/Vue 等框架中，应通过响应式数据控制
disabled绑定，而非手动 DOM 操作
表单提交时按钮禁用失效的常见原因
用户常在 submit 事件里设 button.disabled = true，但页面已跳转或刷新，禁用视觉效果来不及呈现。
- 必须在事件处理函数开头立即设置：
event.preventDefault()+button.disabled = true - 如果用了
fetch或异步请求，禁用后记得在finally中恢复（或根据结果决定是否保持禁用） - 注意：表单内多个提交按钮时，只有被点击的那个会自动禁用；其他按钮需手动控制
disabled 对表单数据提交的影响
被禁用的 <button></button> 或 <input type="submit"> 的值**不会**随表单一起提交——这点常被忽略。
- 若需传递按钮标识（如区分“保存”还是“发布”），改用隐藏域：
<input type="hidden" name="action" value="save"> -
<button type="submit" name="btn" value="publish" disabled></button>→ 提交时没有btn=publish - 禁用的
<input type="checkbox">或<select></select>同样不参与提交，逻辑一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
