
本文介绍在 jquery 中统一选择并禁用所有提交类元素(包括 `` 和 `
在 Web 表单交互中,为防止重复提交,常需在表单提交瞬间禁用所有触发提交的控件。但因 HTML 中存在两种主流提交按钮: 和
jQuery 提供了三种简洁且语义明确的选择方式,推荐按优先级依次使用:
✅ 推荐方案:使用 :submit 伪类选择器
这是 jQuery 原生支持的表单专用伪类,自动匹配所有 type="submit" 的 和
$(':submit').prop('disabled', true);✅ 替代方案:属性选择器 [type="submit"]
通用性强,兼容性好(支持 jQuery 1.0+),同样覆盖两类元素:
$('[type="submit"]').prop('disabled', true);⚠️ 显式方案(不推荐默认使用):组合选择器
虽直观但冗长,仅在需精确控制作用范围(如限定某表单内)时建议使用:
$('input[type="submit"], button[type="submit"]').prop('disabled', true);完整可用示例(含防重复提交关键处理):
⚠️ 关键注意事项:
- 必须调用 event.preventDefault():否则表单会立即提交,禁用逻辑可能来不及执行;
- 避免 return false 与 preventDefault() 混用:onsubmit="myFun(this); return false;" 已阻止默认行为,函数内无需再 preventDefault()(除非通过事件绑定方式注册);
- 禁用后建议恢复状态或跳转:若提交失败,应调用 .prop('disabled', false) 恢复按钮;成功后宜重定向或清空表单,而非保留禁用态;
- 现代替代建议:如项目已升级至 jQuery 3.0+,可结合 Promise 或 async/await 管理异步提交流程,提升用户体验。
通过上述任一选择器,即可安全、简洁、跨标签地禁用全部提交控件,彻底规避重复提交风险。










