jQuery 在提交表单时禁用按钮的最简单方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15529836/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simplest way to disable button on submission of a form?
提问by Mike Hogan
I've been trying to find the "right" way to prevent double submits of forms. There are lots of related posts on SO but none of them hit the spot for me. Two questions below.
我一直在努力寻找“正确”的方式来防止表单的双重提交。SO上有很多相关的帖子，但没有一个适合我。下面两个问题。
Here is my form
这是我的表格
<form method="POST">
<input type="text" name="q"/>
<button class="once-only">Send</button>
</form>
Here is my first attempt to disable double submits:
这是我第一次尝试禁用双重提交：
$(document).ready(function(){
$(".once-only").click(function(){
this.disabled = true;
return true;
});
});
This is the approach suggested here: Disable button after post using JS/Jquery. That post suggests the submitting element must be an input rather than a button, but testing both makes no difference. You can try it yourself using this fiddle: http://jsfiddle.net/uT3hP/
这是此处建议的方法：使用 JS/Jquery 发布后禁用按钮。该帖子表明提交元素必须是输入而不是按钮，但测试两者没有区别。您可以使用此小提琴自己尝试：http: //jsfiddle.net/uT3hP/
As you can see, this disables the button, but also prevents submission of the form. In cases where the submitting element is a button and an input element.
如您所见，这会禁用按钮，但也会阻止提交表单。在提交元素是按钮和输入元素的情况下。
Question 1:why does this click handler stop submission of the form?
问题 1：为什么这个点击处理程序停止提交表单？
Searching around some more I find this solution (from 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;
}
You can play with this using this fiddle: http://jsfiddle.net/uT3hP/1/
你可以用这个小提琴玩这个：http: //jsfiddle.net/uT3hP/1/
This does work, but...
这确实有效，但是...
Question 2:Is this the best we can do?
问题 2：这是我们能做的最好的事情吗？
I thought this would be an elementary thing. Approach 1 does not work, approach 2 does, but I don't like it and sense there must be a simpler way.
我认为这将是一件基本的事情。方法 1 不起作用，方法 2 起作用，但我不喜欢它，并且感觉必须有更简单的方法。
回答by dsgriffin
You can use jQuery's submit(). In this case, it should look something like this:
您可以使用 jQuery 的submit()。在这种情况下，它应该如下所示：
$('form').submit(function(){
$(this).children('input[type=submit]').prop('disabled', true);
});
Here is a working jsFiddle (made by Mike) - http://jsfiddle.net/gKFLG/1/.
这是一个有效的 jsFiddle（由 Mike 制作） - http://jsfiddle.net/gKFLG/1/。
If your submit-button is nota direct child of the form-element you will need to replace childrenwith find. Additionally, your submit-button may also be a buttonelement instead of an inputelement. E.g. This is the case if you are using Bootstrap horizontal forms. Below is a different version of the snippet:
如果您的提交按钮不是表单元素的直接子元素，您将需要替换children为find. 此外，您的提交按钮也可能是一个button元素而不是一个input元素。例如，如果您使用Bootstrap 水平表单，就是这种情况。以下是该代码段的不同版本：
$('form').submit(function(){
$(this).find('button[type=submit]').prop('disabled', true);
});
Demo jsFiddle - http://jsfiddle.net/devillers/fr7gmbcy/
演示 jsFiddle - http://jsfiddle.net/devillers/fr7gmbcy/
回答by Zia
回答by PontiusTheBarbarian
Similarly Ive seen a few examples, this one allows you to alter how long the button is disabled for, through timeout. It also only triggers on a form submit rather than on the buttons click event, which originally caused me a few issues.
同样，我看过一些例子，这个例子允许你通过超时来改变按钮被禁用的时间。它也只在表单提交上触发，而不是在按钮单击事件上触发，这最初给我带来了一些问题。
$('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)
});
回答by Evan Mosseri
You could try using the following code:
您可以尝试使用以下代码：
$(document).ready(function(){
$(".once-only").click(function(){
this.submit();
this.disabled = true;
return true;
});
});
回答by Nuno G
This should help:
这应该有帮助：
<form class="form-once-only" method="POST">
<input type="text" name="q"/>
<button type="submit" class="once-only">Send</button>
</form>
Javascript:
Javascript：
$(document).ready(function(){
$("form.form-once-only").submit(function () {
$(this).find(':button').prop('disabled', true);
});
}
