carlos-sanchez
11/14/2013 - 12:43 AM

Disable Elements. Whenever you want to show something is being disabled simply add the .disabled class (or whatever you’d like to call it)

Disable Elements.

Whenever you want to show something is being disabled simply add the .disabled class (or whatever you’d like to call it). First of all, it will turn its opacity to 0.5, but more importantly, it will disable all pointer events on it (hover, click, etc.).

A live example would be to give this class to the submit button of a form as a default. When every required field is properly filled, remove this class with JavaScript. Clean and simple, it helps the user understand he did everything right.

Important: don’t forget to add some server side verification. CSS and JavaScript can easily be manipulated. ;)

disable-element.css
content_copyfile_download
.disabled {
    pointer-events: none;
    opacity: 0.5;
}