如何为许多表单禁用提交提交按钮 - 任何表单的通用功能

Question

我不是jQuery的专家 - 我知道这很容易 - 但我找不到解决方案.

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

如何使用通用功能禁用提交表单上的提交按钮？

我知道如何禁用1表格.

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

但有了这个,我需要写10倍 - 每个表格的功能......

$('.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);

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

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