javascript - 如何禁用多种表单提交时的提交按钮 - 任何表单的通用功能

Question

我不是 jQuery 专家 - 我知道这很简单 - 但我找不到解决方案。

我有一个页面，其中包含 10 个警报(取消、确认、重新发送......) - 包含 10 个表单和 10 个提交按钮。

如何使用通用函数禁用提交表单上的提交按钮？

我知道如何禁用 1 个表单。

$('form#id').submit(function(){
  $(this).find(':input[type=submit]').prop('disabled', true);
}); 

但是这样我需要编写 10x - 为每个表单编写一个函数......

$('.form').submit(function(){
  $(this).find(':input[type=submit]').prop('disabled', true);
}); 

我尝试了这个，但没有成功..

我需要一个适用于任何形式的函数..

所有表格都是这样的:

            <form id="cancelform" action="cancel.asp">
            <input type="hidden" name="codec" id="codec" value="121">
                <button type="button" class="btn btn-danger bk-rd-off" data-dismiss="modal"><i class="fa fa-times"></i> NO</button>
                <button type="submit" class="btn btn-success bg-success-800 bk-rd-off"><i class="fa fa-check"></i> YES</button>
            </form> 

Answer 1

您甚至不需要 jQuery，可以随意使用 vanilla JS:

document.querySelectorAll('form input[type="submit"]')
  .forEach(input => input.disabled = true);

或者，如果您想要禁用表单提交而不仅仅是按钮，您可以在每个 submit 事件上执行类似于 preventDefault 的操作:

document.querySelectorAll('form').forEach((form) => {
  form.addEventListener('submit', e => e.preventDefault());
});