Use CSS3 in applications - Programming in HTML5 with JavaScript and CSS3 - page 298

If you do not want to hide the element but only make it disabled such that the user can
see it but cannot perform any action on it, you need to add the attribute directly to the HTML
element. As such, you can define a CSS class that you can apply to any elements that you
want to have disabled:
.disableIt
Now that you have a CSS class called .disableIt , you can apply this class to any elements
that you want to disable. In this case, you want to disable a button element, so apply the class
to the button element as shown here:
<button id="myButton" class="disableIt" >My Button</button>
The last step is to create some JavaScript that finds all the controls with this class assigned
to it and adds the disabled attribute to them. The following code demonstrates this:
<script>
$("document").ready(function (e) {
$(".disableIt").attr("disabled", "disabled");
});
</script>
This script has the same net effect as putting the attribute directly on the button element
as shown here:
<button id="myButton" disabled="disabled">My Button</button>
When you have many elements that you would like to disable, it is much easier to create a
CSS class, apply it to the elements, then by using jQuery, apply the disabled attribute to them
all.
Thought experiment
Combining effects
In this thought experiment, apply what you've learned about this objective. You can
find the answer to this question in the “Answers” section at the end of this chapter.
Consider combining transitions with transformations. Individually, transitions and
transformations provide interesting effects to the HTML page. Consider what kind
of effects can be achieved by using them together.