Making a checkbox readonly via a js function

I want to change the checkbox so the background is gray and the check is red and it cannot be typed into.  I want this because that is what I have set other input boxes to when the disabled radio button is selected.

From what I was told you can't change the style of a disabled checkbox.  If you can please give me the code and I'll change the colors that way.  

Eventually I would like to have this on a style sheet or as a tag so that every page will look the same when it is disabled.  But first I want to get the page to look the way I want it to.  

I had to adjust it a bit but it does work.  Any suggestions on how to put it on a style sheet or a tag.

Good to know that it works.

What kind of adjustment you have to do ?

Any suggestions on how to put it on a style sheet or a tag.

Can you please explain ?

Well I needed to put it in the JS function so I just did this:

 document.updatestaff.dmhfacil[i].disabled = true;
 document.updatestaff.dmhfacil[i].style.backgroundColor="#FF0000";

and I got the same result.

I'm so new to Cold Fusion I really don't know what I mean.  There is a style sheet for this project.  My boss asked me to make it so that on the style sheet everytime any form was disabled it would look the same as the form I'm currently working on. Since I know nothing about style sheets I thought a tag might be the solution. Any suggestions?

Here is the javascript I'm using for disabling the form.

 <SCRIPT LANGUAGE="JavaScript">
 function disableform(staff_access_allowed_add_recordcount) {
 document.updatestaff.fname.readOnly=true;
 document.updatestaff.fname.style.backgroundColor="#CCCCCC";
 document.updatestaff.fname.style.color="#FF0000";
 document.updatestaff.code.style.backgroundColor="#CCCCCC";
 document.updatestaff.code.style.color="#FF0000";
 document.updatestaff.lname.readOnly=true;
 document.updatestaff.lname.style.backgroundColor="#CCCCCC";
 document.updatestaff.lname.style.color="#FF0000";
 document.updatestaff.mname.readOnly=true;
 document.updatestaff.mname.style.backgroundColor="#CCCCCC";
 document.updatestaff.mname.style.color="#FF0000";
 document.updatestaff.credent.readOnly=true;
 document.updatestaff.credent.style.backgroundColor="#CCCCCC";
 document.updatestaff.credent.style.color="#FF0000";
document.updatestaff.logname.readOnly=true;
 document.updatestaff.logname.style.backgroundColor="#CCCCCC";
 document.updatestaff.logname.style.color="#FF0000";
 document.updatestaff.fname.readOnly=true;
 document.updatestaff.termdate.style.backgroundColor="#CCCCCC";
 document.updatestaff.termdate.style.color="#FF0000";
 

 document.updatestaff.is_the_form.value="disabled";
 

   document.updatestaff.btn_ctl.disabled=true;
   
   document.updatestaff.btn_ctl.style.backgroundColor='#cccccc';
 
   document.updatestaff.btn_ctl.img src="calendar.gif";
   for (i = 0; i <= staff_access_allowed_add_recordcount; i++) {
        document.updatestaff.dmhfacil[i].disabled = true;
             document.updatestaff.dmhfacil[i].style.backgroundColor="#FF0000";
     
            
      }

}
   
     </SCRIPT>
         

By using stylesheet, you can assign background-color, but not the disabled attribute.

You can use  free stylesheet editor 'TopStyle'.


http://www.bradsoft.com/topstyle/index.asp


Good starting point to learn CSS

http://www.w3schools.com/css/default.asp