javascript 单击 jQuery 后如何禁用按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25012168/
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
How to disable button after click in jQuery
提问by turbostyklerx2
Sometimes I am able to trigger the submit button twice. and the ajax is triggered twice too.
有时我能够触发提交按钮两次。并且 ajax 也被触发了两次。
Here is my html code:
这是我的 html 代码：
<div class="buttons-area">
<input id="step-two" class="btn btn-primary" type="submit" value="Next step ?">
</div>
And here is my ajax:
这是我的 ajax：
<script>
$(document).ready( function () {
$('#step-two').on('click', function(e) {
e.preventDefault();
var formData = new FormData();
formData.append('username', $('#username').val());
formData.append('email', $('#email').val());
formData.append('password', $('#password').val());
formData.append('password_confirmation', $('#password_confirmation').val());
$.ajax({
url: 'registration',
method: 'post',
processData: false,
contentType: false,
cache: false,
dataType: 'json',
data: formData,
beforeSend: function()
{
$(".validation-error-inline").remove();
}
})
.done(function(data) {
if (data.validation_failed == 1)
{
var arr = data.errors;
$.each(arr, function(index, value)
{
if (value.length != 0)
{
$("#"+index).closest(".middle").next(".right")
.append('<span class="text-error validation-error-inline">' + value[0] + '</span>');
}
});
}
})
.fail(function(jqXHR, ajaxOptions, thrownError) {
alert('No response from server');
});
return false;
});
});
</script>
How can I disable the button after the first click and allow the next click only if the ajax is finished?
如何在第一次单击后禁用按钮并仅在 ajax 完成后才允许下一次单击？
Right now I am able to trigger the ajax two times in the row if I am fast and the same error message is shown twice.
现在，如果我速度很快并且相同的错误消息显示两次，我就可以连续两次触发 ajax。
回答by M1K1O
Simply add $(this).attr("disabled", "disabled");before return false.
只需$(this).attr("disabled", "disabled");在return false.
And $(this).removeAttr("disabled");if you want to enable button. Otherwise the button will be disabled until page refresh.
而$(this).removeAttr("disabled");如果要启用按钮。否则该按钮将被禁用，直到页面刷新。
回答by T J
You can disable the button on click
您可以在单击时禁用该按钮
$('#step-two').on('click', function(e) {
e.preventDefault();
$(this).prop('disabled',true); //disable further clicks
…
And enable in the always()callback so that the button will be enabled after the request regardless it succeeded or not.
并在always()回调中启用，这样无论请求成功与否，按钮都会在请求后启用。
$.ajax({
url: 'registration',
method: 'post',
processData: false,
contentType: false,
cache: false,
dataType: 'json',
data: formData,
beforeSend: function()
{
$(".validation-error-inline").remove();
}
})
.done(function(){
// code
})
.fail(function(){
// code
})
.always(function(data) {
$('#step-two').prop('disabled',false); // re-enable the button once ajax is finished
})
回答by Mourndark
Try adding at the top of your click handler to disable the button
尝试在点击处理程序的顶部添加以禁用按钮
$('#step-two').prop('disabled', true);
And then add this before return falseto reenable it:
然后在之前添加它return false以重新启用它：
$('#step-two').prop('disabled', false);
回答by Rob Schmuecker
$(document).ready(function () {
$('#step-two').on('click', function (e) {
$(this).prop('disabled', true); // <-- Disable here
e.preventDefault();
var formData = new FormData();
formData.append('username', $('#username').val());
formData.append('email', $('#email').val());
formData.append('password', $('#password').val());
formData.append('password_confirmation', $('#password_confirmation').val());
$.ajax({
url: 'registration',
method: 'post',
processData: false,
contentType: false,
cache: false,
dataType: 'json',
data: formData,
beforeSend: function () {
$(".validation-error-inline").remove();
}
})
.done(function (data) {
$('#step-two').prop('disabled', false); // <-- Enable here notice we're in a different scope so `$(this)` won't work
if (data.validation_failed == 1) {
var arr = data.errors;
$.each(arr, function (index, value) {
if (value.length != 0) {
$("#" + index).closest(".middle").next(".right")
.append('<span class="text-error validation-error-inline">' + value[0] + '</span>');
}
});
}
})
.fail(function (jqXHR, ajaxOptions, thrownError) {
alert('No response from server');
});
return false;
});
});
回答by Mario Araque
You have to disable your button after the ajax call, like this:
您必须在 ajax 调用后禁用您的按钮，如下所示：
$('#step-two').on('click', function(e) {
var $button = $(this);
$button.attr('disabled', 'disabled');
But dont forget to enable it again if necessary. The best approach is to enable it in the "done" function
但不要忘记在必要时再次启用它。最好的方法是在“完成”功能中启用它
.done(function(data) {
$button.removeAttr('disabled');
....
Regards.
问候。
回答by Leo SHEN
add the code in click event:
在点击事件中添加代码：
$("#step-two").prop("disabled", true)
when ajax complete:
当ajax完成时：
$("#step-two").prop("disabled", false)
