How can I make a css class read only with jquery?

I have a class on a table row like the below. Can someone tell me how to make it read only with jQuery, so everything in that class will be read-only/not interactive (I have some drop downs etc in the row)?

     <tr class="colorCars">.

Open in new window

Who is Participating?
Julian HansenConnect With a Mentor Commented:
This will make readonly all the controls in that row.
If you are only using input and textareas you can set the readonly property like this
$('.colorCars select, .colorCars input, .colorCars textarea').prop({readonly: true});

Open in new window

This won't work on radio, checkbox and select controls - you would need to disable those like this
$('.colorCars select, .colorCars input, .colorCars textarea').prop({disabled: true});

Open in new window

Here is a sample that demonstrates both

Use the Mode selector to toggle between readonly and disabled to see how different controls react
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Add the class as you did, but don't place it in your css file and and you can use css  

You can also use addClass  

  /* nothing */

Open in new window

$(".colorCars").on("click", function(){
       $(this).addClass( "colorCars active" )

Open in new window

Depending on what you want to do and why, there are going to be many options.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.