jQuery 在 Twitter 的 Bootstrap 中禁用按钮的最佳方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17327668/
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
Best way to disable button in Twitter's Bootstrap
提问by Samuel Robert
I am confused when it comes to disabling a <button>, <input>or an <a>element with classes: .btnor .btn-primary, with JavaScript/jQuery.
在禁用<button>,<input>或<a>带有 classes: .btnor的元素时，我很困惑.btn-primary，使用 JavaScript/jQuery。
I have used a following snippet to do that:
我使用了以下代码段来做到这一点：
$('button').addClass('btn-disabled');
$('button').attr('disabled', 'disabled');
$('button').prop('disabled', true);
So, if I just provide the $('button').addClass('btn-disabled');to my element, it will appear as disabled, visually, but the functionality will remain the same and it will be clickable nontheless, so that it the reason why I added the attrand propsettings to the element.
因此，如果我只是$('button').addClass('btn-disabled');向我的元素提供，它会在视觉上显示为禁用，但功能将保持不变并且仍然可以单击，因此这就是我向元素添加attr和prop设置的原因。
Has anyone expirenced this same issue out there? Is this the right way of doing this - while using Twitter's Bootstrap?
有没有人解决过同样的问题？这是正确的做法吗 - 在使用 Twitter 的 Bootstrap 时？
回答by Samuel Robert
You just need the $('button').prop('disabled', true);part, the button will automatically take the disabled class.
您只需要$('button').prop('disabled', true);部分，按钮将自动采用禁用类。
回答by Jeroen K
For input and button:
对于输入和按钮：
$('button').prop('disabled', true);
For anchor:
对于锚：
$('a').attr('disabled', true);
Checked in firefox, chrome.
在 Firefox、Chrome 中检查。
回答by Yarin
Building off jeroenk's answer, here's the rundown:
基于jeroenk 的回答，这里是概要：
$('button').addClass('disabled'); // Disables visually
$('button').prop('disabled', true); // Disables visually + functionally
$('input[type=button]').addClass('disabled'); // Disables visually
$('input[type=button]').prop('disabled', true); // Disables visually + functionally
$('a').addClass('disabled'); // Disables visually
$('a').prop('disabled', true); // Does nothing
$('a').attr('disabled', 'disabled'); // Disables visually
See fiddle
见小提琴
回答by 1234567
The easiest way to do this, is to use the disabledattribute, as you had done in your original question:
最简单的方法是使用disabled属性，就像您在原始问题中所做的那样：
<button class="btn btn-disabled" disabled>Content of Button</button>
<button class="btn btn-disabled" disabled>Content of Button</button>
As of now, Twitter Bootstrap doesn't have a method to disable a button's functionality without using the disabledattribute.
截至目前，Twitter Bootstrap 没有一种方法可以在不使用该disabled属性的情况下禁用按钮的功能。
Nonetheless, this would be an excellent feature for them to implement into their javascript library.
尽管如此，这对他们来说是一个很好的功能，可以在他们的 javascript 库中实现。
回答by Vicky
<div class="bs-example">
<button class="btn btn-success btn-lg" type="button">Active</button>
<button class="btn btn-success disabled" type="button">Disabled</button>
</div>
回答by Schone
What ever attribute is added to the button/anchor/link to disable it, bootstrap is just adding style to it and user will still be able to click it while there is still onclick event. So my simple solution is to check if it is disabled and remove/add onclick event:
将任何属性添加到按钮/锚点/链接以禁用它，引导程序只是为其添加样式，并且用户仍然可以在仍然存在 onclick 事件时单击它。所以我的简单解决方案是检查它是否被禁用并删除/添加 onclick 事件：
if (!('#button').hasAttr('disabled'))
$('#button').attr('onclick', 'someFunction();');
else
$('#button').removeattr('onclick');
