如何禁用Bootstrap的按钮下拉菜单

Question

链接在这里: bootstrap按钮下拉菜单

我想禁用这个按钮下拉菜单，我给<a>标签添加了disabled类，但是仍然可以通过单击下拉按钮来打开下拉菜单。有什么想法吗？

- Mike

---

如果您能够发布一些相应的代码。 - Jai

Answer 1

给按钮添加 disabled 类...

<div class="btn-group">
    <button class="btn btn-primary dropdown-toggle disabled" data-toggle="dropdown">Action <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
</div>

当通过bootstrap网站进行编辑时，这是有效的。我注意到他们没有像他们的示例那样使用锚点。

<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">

- Christopher Marshall

---

非常感谢您指出这个问题，我改用<button>标签后它就可以工作了。我认为这可能是Bootstrap文档中的一个错误。 - Mike

请注意，这仅使按钮“看起来”被禁用（无论使用A标签还是BUTTON标签），在许多浏览器上，包括IE11和Chrome，JS功能仍然可用。请参阅BS3文档。 - user9645

我想补充一点：如果您使用了其他内部元素，比如图标，请记得将它们都禁用，否则下拉菜单仍然会显示出来。 - Giampaolo Ferradini

Answer 2

是的，你可以这样做：

$('.dropdown-toggle').data('toggle', '');

只有当它获得此属性：data-toggle = "dropdown"时，此方法才有效。你可以将dropdown更改为''空白。

或者你可以尝试删除data-toggle这个属性。

$('.dropdown-toggle').removeAttr('data-toggle');

- Jai

Answer 3

你只需要设置按钮的 disabled 属性即可。

$('.dropdown-toggle').prop('disabled', true);

http://getbootstrap.com/2.3.2/base-css.html#buttons 禁用状态

- gawpertron