Disable Any Element With jQuery

Posted on 2012-07-05

In HTML the disabled attribute alows you to mark an input element as 'disabled' Which will trigger the browser to render the input in a 'greyed out' style:

Enabled elements

Disabled elements

This is helpful for limiting user interaction when an app is in an unknown state. Like waiting for an Ajax response. However this attribute is only available on form input elements. This is unfortunate if you are heavily using your own custom UI components. Say you have a bunch of buttons throughout your UI that are actually <a> elements.

I've ran into this problem on several projects and developed a pattern which grew into a plugin I now use on most projects. You can get the plugin here download jquery.disable or check it out and contribute to jquery.disable on github

If you enjoyed this article, consider following me on Twitter