Bootstrap 3 has built-in visual support for disabled dropdown menu items as seen from their
However, these are simply visual changes and don't actually impact the interactivity of the element itself, meaning it will still be clickable!
We can get around this by utilising a combination of the
[disabled] attribute (for oldIE support), and the CSS
pointer-events: none rule (for evergreen browsers), a technique outlined on StackOverflow. Here's the CSS (or LESS, SASS etc.):
Once added to your styles, you can easily disable any dropdown item by applying a
[disabled] attribute to the
<a/> element itself, and adding the usual
.disabled class to the parent
<li>, as seen below.
And that's it! Your links will be truly unclickable. This will work on all evergreen browsers, as well as IE6+, though may have limited support for older versions of Opera. For more information, see the StackOverflow post.