在提交表单时禁用按钮的最简单方法？答案

【问题标题】：Simplest way to disable button on submission of a form?在提交表单时禁用按钮的最简单方法？
【发布时间】：2013-03-09 22:02:51
【问题描述】：

我一直在努力寻找防止重复提交表单的“正确”方法。 SO上有很多相关的帖子，但没有一个对我有用。下面两个问题。

这是我的表格

<form method="POST">
    <input type="text" name="q"/>
    <button class="once-only">Send</button>
</form>

这是我第一次尝试禁用双重提交：

$(document).ready(function(){
    $(".once-only").click(function(){
        this.disabled = true;
        return true;
    });
});

这是此处建议的方法：Disable button after post using JS/Jquery。该帖子建议提交元素必须是输入而不是按钮，但测试两者没有区别。你可以用这个小提琴自己试试：http://jsfiddle.net/uT3hP/

如您所见，这会禁用按钮，但也会阻止提交表单。在提交元素是按钮和输入元素的情况下。

问题 1： 为什么这个点击处理程序会停止提交表单？

搜索更多我找到了这个解决方案（来自Why doesn't my form post when I disable the submit button to prevent double clicking?）

if($.data(this, 'clicked')){
    return false;
} else{
    $.data(this, 'clicked', true);
    return true;
}

你可以用这个小提琴来玩这个：http://jsfiddle.net/uT3hP/1/

这确实有效，但是...

问题 2：这是我们能做的最好的吗？

我认为这将是一个基本的事情。方法 1 行不通，方法 2 可以，但我不喜欢它，感觉必须有更简单的方法。

【问题讨论】：

Disable submit button on form submit的可能重复

标签： javascript jquery forms

【解决方案1】：

简单有效的解决办法是

<form ... onsubmit="myButton.disabled = true; return true;">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

来源：here

【讨论】：

迄今为止最好的解决方案 IMO。它适用于验证，不需要任何外部库。
@mike-hogan 我会说这应该是公认的答案 - 有效并且迄今为止最简单。
最简单有效的使用方法！
不需要return true;。
下一个代码适用于 jQuery Validation 插件：

【解决方案2】：

你可以使用 jQuery 的submit()。在这种情况下，它应该如下所示：

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

这是一个有效的 jsFiddle（由 Mike 制作）-http://jsfiddle.net/gKFLG/1/。

如果您的提交按钮不是表单元素的直接子元素，您需要将children 替换为find。此外，您的提交按钮也可能是 button 元素而不是 input 元素。例如。如果您使用的是Bootstrap horizontal forms，就会出现这种情况。下面是不同版本的 sn-p：

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

演示 jsFiddle - http://jsfiddle.net/devillers/fr7gmbcy/

【讨论】：

@MikeHogan 您发布给我的 jsFiddle 似乎使用的是点击处理程序而不是我的提交，我认为这可能就是原因。等我下班回来再试试看
@MikeHogan 谢谢，如果没问题（对于未来的观众），我会将其更新到我的答案中，并会感谢您。

【解决方案3】：

类似地，我已经看到了一些示例，这个示例允许您通过超时来更改按钮被禁用的时间。它也只触发表单提交而不是按钮点击事件，这最初给我带来了一些问题。

    $('form').submit(function () {
        var button = $('#button');
        var oldValue = button.value;
        var isDisabled = true;

        button.attr('disabled', isDisabled);

        setTimeout(function () {
            button.value = oldValue;
            button.attr('disabled', !isDisabled);
        }, 3000)
    });

【讨论】：

【解决方案4】：

您可以尝试使用以下代码：

$(document).ready(function(){
   $(".once-only").click(function(){
      this.submit();
      this.disabled = true;
      return true;
   });
});

【讨论】：

【解决方案5】：

这应该会有所帮助：

<form class="form-once-only" method="POST">
    <input type="text" name="q"/>
    <button type="submit" class="once-only">Send</button>
</form>

Javascript：

$(document).ready(function(){
    $("form.form-once-only").submit(function () {
        $(this).find(':button').prop('disabled', true);
    });
}

【讨论】：