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

Question

我很困惑,当谈到禁用<button>,<input>或<a>使用类的元素:.btn或者.btn-primary,使用JavaScript/jQuery的.

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

$('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的答案,这是破败的:

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