Disabled dropdown menu items using twitter bootstrap

Question

I use markup to display a dropdown menu using Twitter Bootstrap.

<ul class="nav pull-right">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Menu item 1...</a></li>
            <li class="divider"></li>
            <li><a href="#">Menu item 2...</a></li>
            <li><a href="#">Menu item 3</a></li>
        </ul>
    </li>
</ul>

I want to be able to make menu items appear disabled, i.e. no hover effect and probably a different text decoration to make the disabled state visible to the user.

What is the best way to accomplish this? Is there an exisisting bootstrap css class I can add to the <li> or <a> element?

You want the link to "appear" disabled but not actually disabled? — Andres I Perez, Mar 13 '12 at 12:54
Sorry if the question was unclear. I want one or more menu items to be disabled (in every way, not only appearance). — codeape, Mar 13 '12 at 13:19
And how are you expecting the events to take place, e.g. you want the buttons to become enabled if a certain action is taken? Or you're just looking for a way to easily disable the links with some jQuery? You can't fully disable a link with plain css. — Andres I Perez, Mar 13 '12 at 13:33

score 79 · Answer 1 · edited Feb 22 '17 at 20:04

79

When outputing the code for a disabled drop down, why not simply use :

<li class='disabled'>
  <a href="#">Menu</a>
</li>

You can always add the caret back if you still want it to appear.

Update:
Adding W3Schools Link

edited Feb 22 '17 at 20:04

Madhan

5,750
4
28
61

answered Jan 05 '13 at 19:21

Aeomer

799
1
5
2

5

+1 The documentation shows you this http://twitter.github.com/bootstrap/components.html#navs (under "Disabled state") – ta.speot.is Jan 30 '13 at 22:51
4

Also from the documentation, if you don't want links to be clickable then get rid of the `href`. Although retain the `a` for formatting. – ta.speot.is Jan 30 '13 at 23:45
Good answer. The only thing I don't like about this is that Bootstrap allows the dropdown to close when the user clicks on the disabled item. Hm... – NoOne Jul 02 '15 at 19:49
5

When I tried this, the link "looked" disabled, but it could still be clicked on and used for navigation – liteflier Nov 17 '15 at 16:00
6

This is a great bootstrap style, but it has one problem, it doesn't actually stop the item from being clicked. @buzzy answer below takes care of this. – Anthony Roberts Dec 17 '15 at 14:36

score 22 · Accepted Answer · answered Mar 13 '12 at 13:53

22

You can attach a custom disabled class to your menu link a tag that you want to disable and simply remove the default action by using preventDefault and targetting that class, like so:

$(".disabled-link").click(function(event) {
  event.preventDefault();
});

Then you can style all events from the .disabled-link with a grey backdrop or any style you like;

CSS

a.disabled-link,
a.disabled-link:visited ,
a.disabled-link:active,
a.disabled-link:hover {
    background-color:#d9d9d9 !important;
    color:#aaa !important;
}

Demo

answered Mar 13 '12 at 13:53

Andres I Perez

75,075
21
157
138

2

Thanks, that's just what I needed. I did some googling and found out about the ``pointer-events`` css attribute. This updated version of your jsfiddle uses pointer-events instead of using script to disable the action: http://jsfiddle.net/fABRr/2/ – codeape Mar 13 '12 at 20:02
Sadly that is only supported by FF4+ and Chrome (last time i checked) :( , thought about using the same as well but did not think it was a proper answer with such lack of support. – Andres I Perez Mar 13 '12 at 20:04
1

[Support Chart](http://caniuse.com/#search=pointer-events), no IE support (no surprise there), FF is supported ver 3.6+, no Opera support, Chrome ver 16+ support. Not bad, but not so good either :( – Andres I Perez Mar 13 '12 at 20:06
Ouch. I guess I'll check for the ``disabled-link`` class in the click handlers for the menu items then. – codeape Mar 13 '12 at 20:14
When combining bootstrap with some frameworks (eg. knockout), preventing the click event may not work. This is for example the case using knockout's `data-bind="click: ..."` . Using `.unbind("click");` instead will do the trick. – ılǝ Jun 18 '15 at 14:18
To disable the click event when using Knockout you can use the "enable" binding. No click event will fire when enable is false. – Andreas Mar 01 '18 at 13:36

score 7 · Answer 3 · answered May 30 '12 at 22:47

I prefer this (LESS):

/* Disable link */
a.disabled, 
a.disabled:visited ,
a.disabled:active,
a.disabled:hover {  
  color: #999 ;
  cursor: default;
}
.dropdown-menu {
  a.disabled, 
  a.disabled:visited ,
  a.disabled:active,
  a.disabled:hover {  
    color: #999 ;
    cursor: default;
    background-color: white;
  }
}

score 6 · Answer 4 · edited Oct 08 '13 at 18:45

6

To disable the the dropdown use:

$('.dropdown-toggle').addClass('disabled');

To enable it back:

$('.dropdown-toggle').removeClass('disabled');

edited Oct 08 '13 at 18:45

falsetru

357,413
63
732
636

answered Oct 08 '13 at 18:25

David Wartell

726
1
8
13

For some reason, it doesn't add/remove after the initial page load. – But I'm Not A Wrapper Class Mar 13 '15 at 22:41
it looks disabled but is still clickable. I've added `.dropdown-item.disabled {pointer-events: none;}` as mentioned in comments here – Winand Jul 01 '17 at 21:20

score 6 · Answer 5 · answered Jul 31 '15 at 12:29

6

YES, Bootstrap has a predefined class with all necessary styling you need. You can simply add disabled class to whichever <li> you want

answered Jul 31 '15 at 12:29

osensoy

61
1
2

This does not actually work, at least with Bootstrap 3.x. – lzap Apr 07 '16 at 13:25
2

Oh waid, you said for `
` - that works. Make sure you don't add it for ``.

lzap

Apr 07 '16 at 13:26

score 3 · Answer 6 · answered Jul 31 '12 at 08:22

3

Just to add to Andres answer (don't have enough reputation to add comments :( ). You need to return false from the event handler or it might continue executing other handlers.

$(".disabled-link").click(function(event) {
  event.preventDefault();
  return false;
});

answered Jul 31 '12 at 08:22

Buzzy

2,905
3
22
31

2

I believe ``event.preventDefault()`` takes care of that. – codeape Aug 09 '12 at 20:52
1

@codeape I believe that `return false` is needed for IE though. – Nathan Oct 03 '12 at 23:05
1

@codeape In Chrome, return false is mandatory as well, so I would say it can be considered a good practice. – yagooar Jan 03 '13 at 21:02
In a jQuery event handler, `return false` does two things: `event.stopPropagation()` and `event.preventDefault()`. (When not using jQuery, [`return false` in event handlers means other things depending on where you use it](http://blog.niftysnippets.org/2011/11/story-on-return-false.html)...) So if you add `return false`, you can remove `event.preventDefault()`, because that will be done anyway. – T.J. Crowder Jun 10 '13 at 15:04
If you add `return false;` do not disappear the dropdown if it triggers a confirmation dialog. – iberck Mar 16 '17 at 02:38

score 1 · Answer 7 · answered Apr 21 '14 at 14:25

Similar to above you can use:

    li.disabled > a {
    color:#aaa !important;
    }

This way you are keeping the same bootstrap default class for disabled links and implement the preventDefault() Javascript to disabled the link.

$(".disabled").click(function(event) {
event.preventDefault();
return false;
});

score 0 · Answer 8 · edited Oct 13 '19 at 12:16

0

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  **<a class="dropdown-item disabled" href="#">Disabled link</a>**
  <a class="dropdown-item" href="#">Another link</a>
</div>

Add .disabled to items in the dropdown to style them as disabled. Source: www.getbootstrap.com

edited Oct 13 '19 at 12:16

RobC

22,977
20
73
80

answered Oct 13 '19 at 11:25

Saket Uchil

15
7

Disabled dropdown menu items using twitter bootstrap

8 Answers8

Linked