查找已提交表单的所有提交按钮答案

【问题标题】：Find all submit buttons of submitted form查找已提交表单的所有提交按钮
【发布时间】：2016-08-16 16:22:28
【问题描述】：

我试图在表单提交后禁用所有提交类型的元素，以避免双击。但我只希望禁用提交表单中的按钮。

例如当点击Submit按钮时，只有Submit按钮和Another submit to disable (same form)应该被禁用。其他提交元素应保持原样。

下面的代码禁用所有提交元素。

$(document).on('submit', function (event) {
    event.preventDefault();
 
    var submit_button = $(':submit');
    submit_button.prop('disabled', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="submit">Not part of submitted form (leave enabled)</button>
<form>
  <input type="text">
  <button type="submit">Part of another Form (leave enabled)</button>
</form>

<form>
  <input type="text">
  <button type="submit">Submit</button>
  <button type="submit">Another submit to disable (same form)</button>
</form>

【问题讨论】：

您必须为这些元素添加一个类或数据属性才能仅选择您感兴趣的提交按钮。$('.submitbuttontobedisabled:submit')

标签： javascript jquery html forms

【解决方案1】：

好吧，event.target 将引用submited form，因此您可以使用:submit 选择器找到该表单内的所有submit buttons：

$(document).on('submit', function (event) {
    event.preventDefault();              
    $(':submit',event.target).prop('disabled', true);

});

查看下面的 sn-p 示例

$(document).on('submit', function(event) {
  event.preventDefault();
  $(':submit', event.target).prop('disabled', true);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit">Not part of submitted form (leave enabled)</button>
<form>
  <input type="text">
  <button type="submit">Part of another Form (leave enabled)</button>
</form>

<form>
  <input type="text">
  <button type="submit">Submit</button>
  <button type="submit">Another submit to disable (same form)</button>
</form>

【讨论】：

【解决方案2】：

检测表单提交，然后在该表单中搜索按钮[type=submit] 并禁用它们。

$('form').on('submit', function (event) {
    event.preventDefault();

    var submit_button = $(this).find('button[type="submit"]');
    submit_button.prop('disabled', true);
});

【讨论】：