Solved

Gray out the textbox

Posted on 2003-10-24
1
3,501 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
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

763 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

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now