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?

Answer 1

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

Answer 2

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