Disable Any Element With jQuery

Posted on 05 July 2012 in Code

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 or RSS

comments powered by Disqus