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

【问题标题】：Best way to disable button in Twitter's Bootstrap [duplicate]在 Twitter 的 Bootstrap 中禁用按钮的最佳方法 [重复]
【发布时间】：2013-06-24 00:58:35
【问题描述】：

在使用 JavaScript/jQuery 禁用 <button>、<input> 或 <a> 元素时，我很困惑：.btn 或 .btn-primary。

我使用了以下 sn-p 来做到这一点：

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

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

有没有人解决过同样的问题？在使用 Twitter 的 Bootstrap 时，这是正确的做法吗？

【问题讨论】：

可以检查任何附加事件的hasclass，但我不确定是否有href
@ZachLeighton - 当涉及到“a”时，您必须为点击操作提供事件处理程序
我认为您不能禁用链接。
我发现如果你绑定到一个点击事件并调用 event.preventDefault()，你实际上可以禁用一个链接。但如果这不适用于所有浏览器，我不会感到惊讶。
这不是重复的。引用的重复项不包括问题中所述的具有类：“btn”或“btn btn-primary”的“a”href元素的情况。

标签： javascript jquery button twitter-bootstrap

【解决方案1】：

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

【讨论】：

不适用于主播，看我的回答
要停止点击事件触发，添加一个带有pointer-events: none的类，如stackoverflow.com/a/19477318/45525中所述
将此样式添加到您的 css a[disabled] { pointer-events: none; }
我刚刚在 Bootstrap 3 中尝试过这个，$('.button').prop('disabled', true); 停止了点击事件传播，即 Bootstrap 会为你处理这些。
这在我的情况下不起作用。

【解决方案2】：

对于输入和按钮：

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

对于锚点：

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

在 Firefox、Chrome 中检查。

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

【讨论】：

当您将点击处理程序添加到禁用的锚链接时，它应该不起作用。但是在您提供的示例中，单击处理程序也会被触发。 jsfiddle.net/76wmpohs
这对于 Bootstrap 3 来说似乎已经足够了。看来 bootstrap 正在做一些事情来将 btn 设置为视觉禁用，这也阻止了点击事件的触发。在没有 Bootstrap 3 的纯 jQuery 和 HTML 中，例如一些小提琴示例，它似乎是一个更复杂的故事。但这个问题是在 Bootstrap 的上下文中。

【解决方案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

【讨论】：

很好理解的例子！ $('#button-2').attr('disabled', 'disabled') 对按钮和链接都有效。
@msanjay: 不 - 小提琴使用 Bootstrap 2 并且 visually 禁用链接/锚点，但没有功能上禁用它们，就像评论一样说。如果您将其更改为 BS3，它也会在功能上禁用它们。
EML 提出了一个重要的观点。在 Boot Strap 3 中，设置 disabled 属性就足够了，Bootrap 3 将为您处理其余的事情。但是在 jQuery 和 HTML（没有 Bootstrap 3）中，这样是不够的。

【解决方案4】：

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

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

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

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

【讨论】：

这是 OP 的 sn-p 正在做的事情
@Eonasdan 正确，因为这是实现他想要的结果的最佳方式。我只是重申他所做的是正确的。
（很抱歉，如果您看到不赞成票通知，我点击了错误的内容）

【解决方案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>

【讨论】：

问题的真正解决方案。不需要 JQuery。
这实际上是引导按钮的正确解决方案。
不适用于 chrome
这不会阻止点击事件的触发。
设置 disabled="disabled" 以防止点击事件触发。

【解决方案6】：

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

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

【讨论】：

你可能指的是removeAttr而不是removeattr。
是的，.removeAttr() 是方法名link
这可能不会删除附加 on() 调用的 onclick 事件。