Thread: Checkbox - Change Font Color

I have a form with 3 checkboxes. When user checks one of the boxes, additional fields show beneath the checkbox and the other 2 checkboxes are grayed out (locked). What I want is that when a user checks a checkbox, not only does the other 2 lock, but the text associated with them turn a different font color. I want it to appear as if the other checkboxes and text are being grayed out. BTW - I don't know any java, someone helped me with this and gave me this code so please try to be as specifica as possible.

For the lock function, I am using the following code:

<script language=JavaScript> var U=0;L=1; // (U)nlocked & (L)ocked
function doIt(_v)
{
if(eval("document.bgcheck.c"+_v+".checked"))
{

if(_v==2){lock(3);lock(4);}
if(_v==3){lock(2);lock(4);}
if(_v==4){lock(2);lock(3);}
}
else
{

if(_v==2){unlock(3);unlock(4);}
if(_v==3){unlock(2);unlock(4);}
if(_v==4){unlock(2);unlock(3);}
}
}
function lock(_v)
{
eval("document.bgcheck.c"+_v+".disabled=true"); // IE thing
eval("document.bgcheck.h"+_v+".value=L");
eval("document.bgcheck.h"+_v+".name=''");
}
function unlock(_v)
{
eval("document.bgcheck.c"+_v+".disabled=false"); // IE thing
eval("document.bgcheck.h"+_v+".value=U");
eval("document.bgcheck.h"+_v+".name=document.bgche ck.h"+_v+".id");
}
function whipe(_v)
{
eval("document.bgcheck.c"+_v+".checked=false");
}

</script>

Here's my checkboxes code. The document.getElementById('showMeOnClick1').style.di splay=(this.checked)?'inline':'none'; doIt(4)" code is when the user checks the box the additional fields appear.

<tr><td>Package 1<input type="checkbox" name="package1" id="package1" value="Package1" onclick="document.getElementById('showMeOnClick1') .style.display=(this.checked)?'inline':'none'; doIt(4)" /><input type=hidden name=h4 value=0> </td></tr>

<div id="showMeOnClick1" style="display:none">
<span class="red_font">Please complete the information below as additional information is required for Package 1.</span>
<table>
<tr><td><p><strong>Enter your shirt sizes:</strong><br /></p></td></tr>
<tr><td>
<input name="size1" id="size1" type="text" value="" size="30">
<input name="size2" id="size2" type="text" value="" size="30">
<input name="size3" id="size3" type="text" value="" size="30">
</td></tr></table>
</div>

<tr><td>Package 2<input type="checkbox" name="package2" id="package2" value="Package2" onclick="document.getElementById('showMeOnClick2') .style.display=(this.checked)?'inline':'none'; doIt(3)" /><input type=hidden name=h4 value=0> <div id="showMeOnClick2" style="display:none"> </td></tr>

<div id="showMeOnClick2" style="display:none">
<span class="red_font">Please complete the information below as additional information is required for Package 1.</span>
<table>
<tr><td><p><strong>Enter your desired colors:</strong><br /></p></td></tr>
<tr><td>
<input name="color1" id="color1" type="text" value="" size="30">
<input name="color2" id="color2" type="text" value="" size="30">
<input name="color3" id="color3" type="text" value="" size="30">
</td></tr></table>
</div>

<tr><td>Package 3<input type="checkbox" name="package3" id="package3" value="Package3" onclick="document.getElementById('showMeOnClick3') .style.display=(this.checked)?'inline':'none'; doIt(2)" /><input type=hidden name=h4 value=0> </td></tr>

<div id="showMeOnClick3" style="display:none">
<span class="red_font">Please complete the information below as additional information is required for Package 1.</span>
<table>
<tr><td><p><strong>Enter your desired state:</strong><br /></p></td></tr>
<tr><td>
<input name="state1" id="state1" type="text" value="" size="30">
<input name="state2" id="state2" type="text" value="" size="30">
<input name="state3" id="state3" type="text" value="" size="30">
</td></tr></table>
</div>

This is a Java forum, not a JavaScript forum. Please do not make the mistake of beleiving they are the same thing. They are completely different!

Regards,
Chris