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

Question

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

我已经使用下面的代码片段来实现这个功能：

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

因此，如果我只是将$('button').addClass('btn-disabled');应用于我的元素，它将在视觉上显示为禁用状态，但功能仍然保持不变，并且仍可点击。这就是我在元素中添加attr和prop设置的原因。

有人遇到过类似的问题吗？在使用Twitter的Bootstrap时，这样做是否正确？

- user1386320

---

可以在任何附加事件上检查 hasclass，但是对于 href，我不确定。 - Zach Leighton

@ZachLeighton - 当涉及到“a”时，你必须为点击操作提供事件处理程序。 - user1386320

我认为你不能禁用一个链接。 - Stan

我发现如果你绑定了一个点击事件并调用event.preventDefault()，实际上可以禁用链接。但是如果在所有浏览器中都能起作用，我也不会感到惊讶。 - Mike Turley

这不是一个重复的问题。所提到的重复问题并没有涵盖“a” href元素具有类“btn”或“btn btn-primary”的情况，正如问题中所述。 - snowleopard

Answer 1

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

- Samuel R

---

不适用于锚点，参见我的回答。 - Jeroen K

为了防止点击事件的触发，按照https://dev59.com/FGsz5IYBdhLWcg3wy7HU#19477318中所述，添加一个具有 pointer-events: none 属性的类。 - Synesso

将以下代码添加到你的 CSS 文件中：a[disabled] { pointer-events: none; }。该代码用于禁用链接（即 a 标签）的点击事件。 - Ferran Salguero

我刚刚尝试了在Bootstrap 3中使用$('.button').prop('disabled', true);，它会阻止点击事件的传播，也就是说，Bootstrap为您处理了这个问题。 - Dr. Jan-Philip Gehrcke

这在我的情况下不起作用。 - Player1

Answer 2

对于输入和按钮：

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

对于锚点：

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

在 Firefox 和 Chrome 中检查过。

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

- Jeroen K

---

当您向禁用的锚链接添加单击处理程序时，它不应该起作用。但在您提供的示例中，单击处理程序也会触发。http://jsfiddle.net/76wmpohs/ - ahgindia

这似乎对于Bootstrap 3来说已经足够了。看起来Bootstrap在将btn设置为视觉上禁用时做了一些工作，这也防止了点击事件的触发。在没有Bootstrap 3的纯jQuery和HTML中，例如一些fiddle示例，情况似乎更加复杂。但是这个问题是在Bootstrap的背景下提出的。 - Greg

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

请查看fiddle示例。

- Yarin

---

很好的易懂示例！$('#button-2').attr('disabled', 'disabled') 对于按钮和链接都有效。 - msanjay

不 - 这段代码使用的是 Bootstrap 2，并且在视觉上禁用了链接/锚点，但并没有在功能上禁用它们，就像该注释所说的那样。如果你将其更改为 BS3，它也会在功能上禁用它们。 - EML

EML提出了一个重要观点。在Bootstrap 3中，设置禁用属性就足够了，Bootstrap 3会为您处理其余部分。但是在jQuery和HTML（没有Bootstrap 3）中，这样做是不够的。 - Greg

Answer 4

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

<button class="btn btn-disabled" disabled>按钮内容</button>

目前，Twitter Bootstrap没有一种方法可以禁用按钮的功能而不使用disabled属性。

尽管如此，这将是一个非常好的功能，值得他们将其实现到他们的javascript库中。

- 1234567

---

这就是OP代码片段正在执行的内容。 - Eonasdan

@Eonasdan 没错，那是实现他期望结果的最佳方式。我只是在重申他所做的是正确的。 - 1234567

（如果您看到了一个踩的通知，那是我误点了） - Steve McGill

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>

- Vicky

---

无需使用 JQuery，提供问题的真实解决方案。 - Web_Developer

这实际上是Bootstrap按钮的正确解决方案。 - Andre Lombaard

不适用于Chrome。 - Leandro Bardelli

适用于Chrome，并且是在使用Bootstrap时设置按钮为不可点击的推荐方法。 - StackOverflowUser

这不会防止点击事件被触发。 - Nathan Arthur

将disabled="disabled"设置为防止点击事件触发。 - MetalMikester

Answer 6

无论将什么属性添加到按钮/锚点/链接以禁用它，Bootstrap只是为其添加样式，用户仍然可以在仍存在onclick事件的情况下单击它。因此，我的简单解决方案是检查它是否被禁用并删除/添加onclick事件：

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

- Schone

---

你可能是想使用 removeAttr 而不是 removeattr。 - Arto Bendiken

是的，.removeAttr() 是该方法的名称 链接。 - Schone

这可能不会移除使用on()调用附加的onclick事件。 - Vladislav Rastrusny