jQuery 如何启用和禁用 Twitter Bootstrap 按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19220425/
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 enable and disable Twitter Bootstrap Button?
提问by chongzixin
I am trying to achieve the scenario of disabling a button on clicking it, and then enabling it again after the ajax request has completed successfully.
我试图实现在单击它时禁用按钮的场景，然后在 ajax 请求成功完成后再次启用它。
The below is the snippet of my code.
下面是我的代码片段。
Form
形式
<button id="btnSubmit" type="submit" class="btn btn-warning btn-lg">Submit!</button>
Javascript
Javascript
$('#resForm').validate({
// disable submit button
$('#btnSubmit').prop('disabled', true);
submitHandler: function(form) {
$.ajax({
..... typical ajax stuff .....
success: function(data) {
alert(data);
$('success').html(data);
// enable reserve button again
$('#btnSubmit').prop('disabled', false);
},
error: function (jqXHR, textStatus, errorThrown) {
// console.log(jqXHR);
}
});
}
});
It doesn't work. And checking my console on Chrome tells me Uncaught SyntaxError: Unexpected token (. It feels like it's a stupid mistake somewhere and I can't figure it out. I have read that propis meant for jQuery 1.6.1 and later and I am on 1.8.3.
它不起作用。在 Chrome 上检查我的控制台告诉我Uncaught SyntaxError: Unexpected token (。感觉就像是某个地方的愚蠢错误，我无法弄清楚。我读过它prop适用于 jQuery 1.6.1 及更高版本，我使用的是 1.8.3。
回答by Shashank
$('#resForm').validate({
submitHandler: function(form) {
// disable submit button
$('#btnSubmit').prop('disabled', true);
$.ajax({
..... typical ajax stuff .....
success: function(data) {
alert(data);
$('success').html(data);
// enable reserve button again
$('#btnSubmit').prop('disabled', false);
},
error: function (jqXHR, textStatus, errorThrown) {
// console.log(jqXHR);
}
});
}
});
Try this
尝试这个
回答by oikonomopo
From my answer to another post in SO!I can't think a simpler/easier way! ;-)
从我对 SO 中另一篇文章的回答！我想不出更简单/更简单的方法！;-)
For Anchor Tags(Links) :
对于锚标签（链接）：
<a href="#delete-modal" class="btn btn-danger" id="delete"> Delete</a>
To enable the Anchor tag:
要启用锚标记：
$('#delete').removeClass('disabled');
$('#delete').attr("data-toggle", "modal");
To disable the Anchor tag:
要禁用锚标记：
$('#delete').addClass('disabled');
$('#delete').removeAttr('data-toggle');
回答by Shree
Use http://jsfiddle.net/to check your code.
使用http://jsfiddle.net/检查您的代码。
Try:
尝试：
$('#resForm').validate({
submitHandler: function(form) {
// disable submit button
$('#btnSubmit').prop('disabled', true);
$.ajax({
//..... typical ajax stuff .....
success: function(data) {
alert(data);
$('success').html(data);
// enable reserve button again
$('#btnSubmit').prop('disabled', false);
},
error: function (jqXHR, textStatus, errorThrown) {
// console.log(jqXHR);
}
});
}
});
Fiddle with Correction: http://jsfiddle.net/shree/qB9aW/.JSHint gives you a hint for error.
摆弄更正：http: //jsfiddle.net/shree/qB9aW/.JSHint 为您提供错误提示。
