我很困惑,当涉及到禁用一个<按钮>,<输入>或一个< >元素类:.btn或.btn-primary,与JavaScript/jQuery。

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

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

因此,如果我只是提供$('button').addClass('btn-disabled');到我的元素,它将显示为禁用,视觉上,但功能将保持不变,它将是可点击的,所以这就是为什么我添加了attr和道具设置的元素。

有人遇到过同样的问题吗?当使用Twitter的Bootstrap时,这是正确的方法吗?


当前回答

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

其他回答

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

看到小提琴

最简单的方法是使用disabled属性,就像你在最初的问题中所做的那样:

<巴顿级=“btn btn disabled”

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

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

你只需要$('按钮')。道具(“禁用”,真正的);部分,该按钮将自动接受禁用类。

任何属性被添加到按钮/锚点/链接来禁用它,引导只是给它添加样式,用户仍然可以点击它,而仍然有onclick事件。所以我的简单解决方案是检查它是否被禁用,并删除/添加onclick事件:

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

输入和按钮:

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

主持人:

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

在火狐浏览器和chrome浏览器中登录。

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