javascript - 在 Twitter 的 Bootstrap 中禁用按钮的最佳方法

Question

当我使用 JavaScript/jQuery禁用<button>,<input>或带有 classes:或, 的<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，铬。

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

Answer 3

建立在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

见小提琴

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

将任何属性添加到按钮/锚点/链接以禁用它，引导程序只是为其添加样式，并且用户仍然可以在仍有 onclick 事件时单击它。所以我的简单解决方案是检查它是否被禁用并删除/添加 onclick 事件：

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