How to change color of some elements in an HTML form

Question

Based on a selection of a radio button I need to enable or disable a whole list of checkbox options. When the selection calls for a disable I'm using this:

function radioSelectDNC() {
    for (i = 3; i < document.addPNtoDNC.elements.length - 1; i++) {
        document.addPNtoDNC[i].disabled=true;      // this is working
        document.addPNtoDNC[i].style.color="blue"; //this line is not working
    }

The disabling works, but the color for the text of the checkbox options is not. It's a long form, but just in case, here's how I'm listing the checkbox options:

            <label><input type="checkbox" name="Campaign" value="Value1">Value1<br></label>
            <label><input type="checkbox" name="Campaign" value="Value2">Value2<br></label>
            <label><input type="checkbox" name="Campaign" value="Value3">Value3<br></label>

Am I using the right property? Where can I find a list of properties?

Oh, and please, just in case, don't give me jQuery. I'm just getting started in this, and every time I search and find jQuery answers my head starts spinning. One of these days.

score 1 · Accepted Answer · answered Jan 22 '13 at 03:50

It seems that you are trying to modify the color property of the <input>, not the one of the <label> tag as you would want. You have to change the document.addPNtoDNC[i] part to reference the label instead (don't know exactly what you are doing here). document.addPNtoDNC[i].parentNode should work since the input tag is inside the label one.

score 1 · Answer 2 · edited May 23 '17 at 12:21

I think you're making this harder on yourself than necessary. What you should do is create a CSS selector for a class and then apply that class when a checkbox is checked through simple javascript. Likewise you can also simply remove the class when the checkbox is unchecked. I know you asked for a non-JQuery solution so here take a look at this:

Change an element's class with JavaScript

This is how you would add and remove classes through pure Javascript. It doesn't look too bad, but definitely looks like a lot of trouble to simply do that right?

That's because it is and that's exactly why JQuery is so nice. I'm not gonna give you a JQuery answer because you said not to, but I'm still gonna recommend it. You can run away from JQuery for as long as you'd like, but if you take an hour of your time to learn JQuery or Prototype or whatever, you'll find you don't have to do so much work. JQuery has a nice toggleClass() function and it makes your life a lot easier. Hope this helps. If you need help, don't be afraid to ask. That includes learning JQuery.

Thanks. Great information. Just that the other answer goes straight to what I need, quick. — Amarundo, Jan 22 '13 at 16:14

How to change color of some elements in an HTML form

2 Answers2