Solved

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

Posted on 2016-11-30
2
22 Views
Last Modified: 2016-11-30
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

0
Comment
Question by:earwig75
2 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 41907539
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
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41907720
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

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now