Disabled Bootstrap Dropdown Menu Still Clickable

It is a strange use case but for certain situations where you want to disable functionality due to the status of a record, bootstrap offers the handy dandy ‘disable’ class that works for drop downs, buttons, and links. Button’s works without fuss and when disabled are totally not clickable but to get a dropdown to mimic the same functionality you will need to include this in your CSS up top or add it to your bootstrap:

.dropdown-menu > .disabled{
cursor: not-allowed;
}

/* The real magic 😉 */
.dropdown-menu > .disabled > a{
pointer-events: none;
}

This will ensure that those drop downs are truly not clickable which with Bootstrap 3.x is not the case.

This tip of course came from the following page which goes in to much more detail as to why you have to invoke such css magic:

http://blog.craigsworks.com/bootstrap-3-disabled-dropdown-links/

Leave a Reply

Your email address will not be published. Required fields are marked *