在Twitter的Bootstrap中禁用按钮的最佳方法[重复]

Question

这个问题在这里已有答案：

• What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap) 15个答案

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

我使用了以下代码片段来做到这一点：

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

所以，如果我只是将$('button').addClass('btn-disabled');提供给我的元素，它将在视觉上显示为禁用，但功能将保持不变，但它仍然是可点击的，因此我将attr和prop设置添加到元素中的原因。

有没有人经历过同样的问题？这是否是正确的方法 - 使用Twitter的Bootstrap？

Answer 1

你只需要$('button').prop('disabled', true);部分，该按钮将自动进入禁用课程。

Answer 2

对于输入和按钮：

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

对于锚点：

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

签入firefox，chrome。

见http://jsfiddle.net/czL54/2/

Answer 3

建立jeroenk's answer，这是破败的：

$('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

见fiddle

Answer 4

最简单的方法是使用disabled属性，就像在原始问题中所做的那样：

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

截至目前，Twitter Bootstrap没有一种方法可以在不使用disabled属性的情况下禁用按钮的功能。

尽管如此，这将是他们实现到他们的JavaScript库中的一个很好的功能。

Answer 5

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

Answer 6

什么属性被添加到按钮/锚点/链接以禁用它，bootstrap只是添加样式，用户仍然可以在仍有onclick事件时单击它。所以我的简单解决方案是检查它是否被禁用并删除/添加onclick事件：

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