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

【问题标题】：How to disable submit button on submit for many forms - generic function to any form如何禁用提交许多表单的提交按钮 - 任何表单的通用功能
【发布时间】：2018-10-02 23:03:03
【问题描述】：

我不是 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>

【问题讨论】：

使用函数并将 as 参数的 if 发送给函数，然后从那里计算出其他所有内容
Disable submit functionality for all forms on a HTML page的可能重复
嗨@MikeMcCaughan tks！我阅读了解决方案，但我的问题是仅使用 1 个功能禁用提交按钮 ON SUBMIT - 并且适用于页面中的任何表单。（因为如果我有 10 个表格，我需要 10 个函数）
对该问题的公认答案是一行代码，它将禁止提交页面上的所有表单...
是的@MikeMcCaughan，但我的问题是关于如何在提交时禁用提交按钮，并且任何表单都只有一个功能。这个问题解决不了问题。正如我在问题中所说 - 如何禁用我知道的按钮。如何禁用提交 - 我知道。我不知道如何在提交时禁用并且只有 1 个通用功能 - 适用于我在 html 中拥有的所有表单。如果没有这个，我需要为每个表单编写 1 个函数来禁用 - 因为我知道的方法需要表单 ID。在这里，我得到了 2 个完整的解决方案 - 使用 vanilla JS 和使用 JQuery。

标签： javascript jquery forms form-submit

【解决方案1】：

选择所有表单，然后 onSubmit，使用event.target 获取对正在提交的单个表单的引用，找到它的提交按钮，然后禁用它。应该适用于 1 个表格或 100 个表格....

Example JS Fiddle

$('form').submit(function(event){
  // disable future submits
    $(event.target).find('[type="submit"]').prop('disabled', true); 
});

根据您的需要，您还可以添加event.preventDefault();

【讨论】：

嗨@TJBlackman，感谢您宝贵的时间来帮助我！工作正常，但我需要一个解决方案来禁用提交按钮。避免用户多次点击。我知道如何为每个表单执行此操作（使用#ID）-但我不知道如何对任何表单执行此操作（并避免为每个表单编写 1 个函数）-您明白吗？对不起我的英语不好。 TKS！

【解决方案2】：

你甚至不需要 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());
});

【讨论】：

嗨@CertainPerformance 感谢您宝贵的时间和帮助！我不是 JS 方面的专家——但我测试了这个功能（仅限复制粘贴）——但没有奏效。我在页面上有警告消息 - 例如“你想取消这个吗？ - 是/否”或“你想发送电子邮件吗？” - 并且提交按钮不会禁用用户点击发送 100 封电子邮件。我知道如何禁用提交 1 个表单（带有表单 ID）的按钮 - 但我想要一个禁用所有表单的解决方案 - 然后我不需要写 10 倍相同的功能.. tks!!
didn't works 信息量不是很大，请详细说明？如果这些警报消息与问题相关，请在您的问题中发布相关代码。我只能看到你到目前为止发布的代码。
我用表单代码编辑问题。所有表单都相同——只更改 ID 和 ASP 页面。很多@CertainPerformance

【解决方案3】：

我不确定您为什么要尝试使用 find，而您可以这样做：

$('input[type=submit]').prop('disabled', true);

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

【讨论】：

嗨@jdgregson。感谢您宝贵的时间和帮助！我在页面中有许多警告消息 - 例如“你想取消这个吗？ - 是/否”或“你想发送电子邮件吗？” - 如果提交按钮没有禁用用户发送 100 封电子邮件点击.. 我知道如何禁用提交 1 个表单（带有表单 ID）的按钮 - 但我想要一个禁用所有表单的解决方案 - 然后我不需要写 10x 相同的功能.. tks!!

【解决方案4】：

您正在将 disabled 属性添加到 $(this) 选择器，这是当前提交的表单。如果您想禁用所有提交按钮，您可以在提交回调中使用全局查询选择器：

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

【讨论】：