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)?

<table>
     <tr class="colorCars">.
......

Open in new window

earwig75Asked:
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
0
 
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 http://api.jquery.com/css/.  

You can also use addClass https://api.jquery.com/addclass/.  

CSS
.colorCars{
  /* nothing */
}

.colorCars.active{
  color:red;
}

Open in new window


JS
$(".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.
0
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.