jQuery 单击后禁用提交按钮并在几秒钟后重新启用它
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10932766/
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
Disable the submit button after clicking and enable it back again after a few seconds
提问by Jetoox
I'm using jquery $.post when submitting a form. I want to disable the button for like 5 seconds after it has been clicked to avoid multiple submission of the form.
我在提交表单时使用 jquery $.post。我想在单击该按钮后将其禁用 5 秒钟，以避免多次提交表单。
here's what I've done for now:
这是我现在所做的：
$('#btn').click(function(){
$.post(base_url + 'folder/controller/function',$('#formID').serialize(),function(data){
$('#message').slideDown().html('<span>'+data+'</span>');
});
});
I've used fadeIn and fadeOut before, but still it doesn't work when I tested it clicking the button rapidly. What should I do to achieve what I wanted to happen?
我以前使用过fadeIn 和fadeOut，但是当我测试它快速单击按钮时它仍然不起作用。我应该怎么做才能实现我想要发生的事情？
回答by Teneff
You can do what you wanted like this:
你可以像这样做你想做的：
var fewSeconds = 5;
$('#btn').click(function(){
// Ajax request
var btn = $(this);
btn.prop('disabled', true);
setTimeout(function(){
btn.prop('disabled', false);
}, fewSeconds*1000);
});
or you can use jQuery's .complete()method which is being executed after the ajax receives a response:
或者您可以使用.complete()在 ajax 收到响应后执行的jQuery方法：
$('#btn').click(function(){
var btn = $(this);
$.post(/*...*/).complete(function(){
btn.prop('disabled', false);
});
btn.prop('disabled', true);
});
edit:this is an examplewith 3 seconds server-side response delay
回答by German
Just place this in your JS for the page the submit button is on
只需将它放在您的 JS 中提交按钮所在的页面
<script type="text/javascript">
$(document).ready(function(){
$("input[type='submit']").attr("disabled", false);
$("form").submit(function(){
$("input[type='submit']").attr("disabled", true).val("Please wait...");
return true;
})
})
</script>
回答by Prahlad
In extension of @Teneff answer if there is multiple submit button in the form and you want the name of button at server side.
如果表单中有多个提交按钮并且您想要服务器端的按钮名称，则作为@Teneff 答案的扩展。
<script type="text/javascript">
var fewSeconds = 5;
$('button').click(function(){
var btn = $(this);
var text = btn.text();
setTimeout(function(){
btn.prop('disabled', true);
btn.text("Wait...");
}, 10);
setTimeout(function(){
btn.prop('disabled', false);
btn.text( text);
}, fewSeconds*1000);
});
<script>
回答by Akinlosotu Samuel Adeniyi
Take any form of button and accrue its value to a variable. Replace the value with "please wait..." and after 5 seconds pass the previous saved variable back and disable to false.
采用任何形式的按钮并将其值累积到一个变量中。将该值替换为“请稍候...”，并在 5 秒后将先前保存的变量传回并禁用为 false。
$('input[type=submit], input[type=button]').click(function(){
var btn = $(this);
var textd = btn.attr("value");
btn.prop('disabled', true);
btn.attr('value', 'Please wait...');
setTimeout(function(){
btn.prop('disabled', false);
btn.attr('value', textd);
}, fewSeconds*1000);
});
回答by ncremins
Have a look at the .success function hereit's what you need.
so what you do is disable button on click
所以你要做的是禁用单击按钮
$('#btn').click(function(){
$('#btn').attr('disabled', true);
$.post(base_url + 'folder/controller/function', $('#formID').serialize(), function(data) {
// code on completion here
})
.success(function() {
$('#btn').attr('disabled', false);
})
});
});
This way is better as what happens if your request takes more than 5 seconds to return?
这种方式更好，因为如果您的请求返回时间超过 5 秒会发生什么？
回答by Thulasiram
$('#btn').live('click', function () {
$(this).prop('disabled', true).delay(800).prop('disabled', false);
});
//Or
//或者
$('#btn').live('click', function () {
var obj = $(this);
obj.prop('disabled', true);
$.post(base_url + 'folder/controller/function', $('#formID').serialize(), function (data) {
$('#message').slideDown().html('<span>' + data + '</span>');
obj.prop('disabled', false);
});
});
