如何使用jQuery选中所有type="submit"元素并禁用它们

你当前的代码存在两个问题：一是全局选择所有input[type="submit"]会影响页面上的其他表单，二是错误地将禁用属性设为false（这是启用按钮，而非禁用）。要精准选中当前提交表单内的所有提交按钮并禁用，可按以下方式修改：

修改后的JS代码 #

function myFun(ele) {
  var form = $(ele).closest("form");
  // 选中当前表单内所有type为submit的input和button元素，设置禁用状态
  form.find('input[type="submit"], button[type="submit"]').prop('disabled', true);
}

关键说明 #

• 用form.find()替代全局选择器：仅对触发提交的当前表单内元素生效，不会干扰其他表单
• 同时包含两种提交按钮类型：覆盖input[type="submit"]和button[type="submit"]，适配你提到的两种场景
• 设置disabled: true：这才是启用按钮禁用状态的正确值，之前的false是解除禁用

完整示例代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onsubmit="myFun(this)">
  <input type="text" value="Example">
  <input type="submit" value="Submit">
  <button type="submit">Submit</button>
</form>
<form onsubmit="myFun(this)">
  <input type="text" value="Another Form">
  <button type="submit">Submit Form 2</button>
</form>

这样不管页面有多少个表单，每个表单提交时只会禁用自身内部的所有提交按钮，不会影响其他表单的正常操作。

内容的提问来源于stack exchange，提问作者be MrZulf