Solved

Gray out the textbox

Posted on 2003-10-24
1
3,506 Views
Last Modified: 2012-08-13
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.
0
Comment
Question by:nicolle
1 Comment
 
LVL 15

Accepted Solution

by:
VincentPuglia earned 50 total points
ID: 9617657
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

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

803 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