Disabled dropdown menu items using twitter bootstrap

Question

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

Answer 1

<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

Answer 2

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

Answer 3

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

Answer 4

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;
});

Answer 5

To disable the the dropdown use:

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

To enable it back:

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

Answer 6

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;
});