javascript - 查找已提交表单的所有提交按钮

Question

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

例如，当点击提交按钮时，只有提交按钮和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>

Answer 1

好吧，event.target 将引用提交的表单，因此您可以找到所有提交按钮在该表单中使用 :submit 选择器:

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

});

检查下面的代码片段示例

$(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>