Gray out the textbox

When I disabled the checkbox, I saw the checkbox beign gray out.
But, how come drop down and text dont not gray out ? Is that a way to force them.
nicolleAsked:
Who is Participating?
 
VincentPugliaCommented:
Hi,
  You are going to have to use style, for example:

<html><head>
<style>
  .disabled {background-color:#d1d1d1; }
  .enabled {background-color:#FFFFFF; }
</style>
<script type="text/javascript" language="javascript">
<!--

//---------------------------------------------------------------
//    author: Vincent Puglia
//    site:   http://members.aol.com/grassblad
//---------------------------------------------------------------
function init()
{
  formObj = document.form1
  for (i = 0; i < formObj.length; i++)
    if (formObj.elements[i].type != 'checkbox')
    {
       el = formObj.elements[i]
       el.disabled = true;
     document.getElementById(el.id).className =            'disabled'
    }
}

function toggle(radName, formObj)
{
   var done = false;
   for (var i = 0; i < formObj.length; i++)
      if (formObj.elements[i].name == radName)
      {
        do
        {
          if (formObj.elements[i].type != 'checkbox')
          {
            el = formObj.elements[i]
            el.disabled = (el.disabled) ? false : true ;
   document.getElementById(el.id).className =           (el.disabled) ? 'disabled' : 'enabled' ;
           }
          i++ ;


          if ( i == formObj.length || (formObj.elements[i].type == 'checkbox' && formObj.elements[i].name != radName))
          {
             done = true;
             break;
           }

         }
         while (!done)
       }
   }

//-->
</script>


</head>
<body onload='init()'>




<script Language="JavaScript">
  <!--

  //-->
</script>

<form Name="form1" ID="form1" Action="" Method="post">
<table>
<tr>
<td>Toggle<input type=checkbox onclick="toggle(this.name, this.form);" name=checkbox1 ></td>
<td><input name='field1' value="text field" id='field1'><br></td>
<td><input name='field2' value="text field" id='field2'></td></tr>
<tr>
<td>Toggle <input type=checkbox onclick="toggle(this.name, this.form);" name=checkbox2></td>
<td><input name='field3' value="text field" id='field3'><br></td>
<td><input name='field4' value="text field" id='field4'></td></tr>
<tr>
<td>Toggle<input type=checkbox onclick="toggle(this.name, this.form);" name=checkbox3></td>
<td>
<input name='field5' value="text field" id='field5'><br></td>
<td><input name='field6' value="text field" id='field6'></td></tr>
</table>
</form>
</body>
</html>
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.