Disabled dropdown menu items using twitter bootstrap

To disable the the dropdown use:

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

To enable it back:

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

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

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

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