最好的方法禁用按钮在Twitter's Bootstrap

当涉及到禁用带有类.btn或.btn-primary的<button>， <input>或<a>元素时，我很困惑，使用JavaScript/jQuery。

我使用了以下片段来做到这一点:

$('button').addClass('btn-disabled');
$('button').attr('disabled', 'disabled');
$('button').prop('disabled', true);

因此，如果我只是向元素提供$('button').addClass('btn-disabled');，它将在视觉上显示为禁用，但功能将保持不变，尽管如此，它将是可单击的，因此这就是为什么我向元素添加attr和prop设置的原因。

有人遇到过同样的问题吗?当使用Twitter的Bootstrap时，这是正确的方法吗?

368423 次浏览
小开
最佳答案

你只需要$('button').prop('disabled', true);部分，按钮将自动接受禁用类。

小开

最简单的方法是使用disabled属性，就像你在最初的问题中所做的那样:

<button class="btn btn-disabled" disabled>Content of Button</button>

到目前为止，Twitter Bootstrap还没有一个方法可以在不使用disabled属性的情况下禁用按钮的功能。

尽管如此，这对他们来说是一个很好的功能，可以实现到他们的javascript库中。

小开

任何属性被添加到按钮/锚点/链接来禁用它，引导只是给它添加样式，用户仍然可以点击它，而仍然有onclick事件。所以我的简单解决方案是检查它是否被禁用，并删除/添加onclick事件:

if (!('#button').hasAttr('disabled'))
$('#button').attr('onclick', 'someFunction();');
else
$('#button').removeattr('onclick');
小开

输入和按钮:

$('button').prop('disabled', true);

主持人:

$('a').attr('disabled', true);

在火狐浏览器和chrome浏览器中登录。

看到http://jsfiddle.net/czL54/2/

小开

基于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

看到< >强小提琴< / >强

小开 
<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>

提交答案