Disabled dropdown menu items using twitter bootstrap

Question

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

Answer 1

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

Answer 2

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