Link to home
Start Free TrialLog in
Avatar of champ_010
champ_010

asked on

Checkbox disable Select Box


I still can't get the hang of JavaScript.  How to make it so that checking the checkbox enables select list and unchecking disables it.  I want to have two sets of these and then another set of checkboxes that enable or disable the two sets:


<input name="allDisabled" type="checkbox" id="allDisabled" value="checkbox">all enabled
<input type="checkbox" name="checkbox2" value="checkbox">all disabled <br>

this checkbox1 enables this select1:
<input name="checkbox1" type="checkbox" id="checkbox1" value="checkbox">
<select name="select1" id="select1">
      <options></options>
      <options></options>
      <options></options>
</select>

this checkbox3 enables this select2
<input type="checkbox" name="checkbox" value="checkbox">
      <options></options>
      <options></options>
      <options></options>
<select name="select2" id="select2"></select>

Thanks
Avatar of sajuks
sajuks
//This ex should help you
<html>
<head>
<script language="JavaScript">
<!--

function togglefield(theform, enabled) {
    for (var i = 0; i < theform.elements.length; i++) {
         if (theform.elements[i].id.indexOf('_dis') != -1) {
              theform.elements[i].disabled = (!enabled);
         }
    }
}

// -->
</script>
<form name="theform">
<input type="checkbox" onclick="togglefield(this.form, this.checked)" />Enable/Disable All <BR>
<select name="tstart" id="Select1_dis" disabled="disabled"> <options></options>
    <options></options>
    <options></options>
</select>
<select name="tstop"  id="Select2_dis" disabled="disabled"> <options></options>
    <options></options>
    <options></options>
</select>
<select name="tzone"  id="Select3_dis" disabled="disabled"> <options></options>
    <options></options>
    <options></options>
</select>
</form>
</body>
</html>
Avatar of champ_010
champ_010

ASKER

Thanks, I see this enables/disables all the fields.  I fiddled around but couldn't figure out how
to use get the other checkboxes to then enable/disable their corresponding select...
Avatar of sajuks
sajuks
<html>
<head>
<script language="JavaScript">
<!--

function togglefield(theform, enabled) {
   for (var i = 0; i < theform.elements.length; i++) {
        if (theform.elements[i].id.indexOf('_dis') != -1) {
             theform.elements[i].disabled = (!enabled);
        }
   }
}
function disableselect(changestate)
{
      document.theform.singleselect.disabled = changestate;
}


// -->
</script>
<form name="theform">
<input type="checkbox" onclick="togglefield(this.form, this.checked)" />Enable/Disable All <BR>
<select name="tstart" id="Select1_dis" disabled="disabled"> <options></options>
   <options></options>
   <options></options>
</select>
<select name="tstop"  id="Select2_dis" disabled="disabled"> <options></options>
   <options></options>
   <options></options>
</select>
<select name="tzone"  id="Select3_dis" disabled="disabled"> <options></options>
   <options></options>
   <options></options>
</select>
<BR>
<HR>

<input type="checkbox" onclick="disableselect(this.checked)" /> Disable/Enable
<select name="singleselect" > <options></options>
   <options></options>
   <options></options>
</select>


</select>
</form>
</body>
</html>
Avatar of champ_010
champ_010

ASKER


If you look at my original form, the top two checkboxes enable/disable the for form elements below.  Of the four below, each of the checkboxes should enable/disable the select next to it.

Can you tell me if it is possible to do this--otherwise I may have to opt for the one you show me where only one checkbox to enable/disable all form fields... thanks

<form name="theform">
<input name="allDisabled" type="checkbox" id="allDisabled" value="checkbox">all enabled
<input type="checkbox" name="checkbox2" value="checkbox">all disabled <br>
  this checkbox enables this select1:
  <input name="checkbox1" type="checkbox" id="checkbox1" value="checkbox">
<select name="select1" id="select1">
     <options></options>
     <options></options>
     <options></options>
</select>
  <br>
  this checkbox enables this select2
  <input type="checkbox" name="checkbox" value="checkbox">
     <options></options>
     <options></options>
     <options></options>
<select name="select2" id="select2"></select>

</form>
Avatar of sajuks
sajuks
// try this example. If you are using a checkbox, a single checkbox is better

<html>
<head>
<script language="JavaScript">
<!--

function togglefield(theform, enabled) {
  for (var i = 0; i < theform.elements.length; i++) {
       if (theform.elements[i].id.indexOf('_dis') != -1) {
            theform.elements[i].disabled = (!enabled);
       }
  }
}
function disableselect(changestate)
{
    document.theform.singleselect.disabled = changestate;
}


// -->
</script>
<form name="theform">
<input type="button" onclick="togglefield(this.form, true)" value ="Enable"/>
<input type="button" onclick="togglefield(this.form, false)" value ="Disable"/><BR>
<select name="tstart" id="Select1_dis" disabled="disabled"> <options></options>
  <options></options>
  <options></options>
</select>
<select name="tstop"  id="Select2_dis" disabled="disabled"> <options></options>
  <options></options>
  <options></options>
</select>
<select name="tzone"  id="Select3_dis" disabled="disabled"> <options></options>
  <options></options>
  <options></options>
</select>
<BR>
<HR>

<input type="checkbox" onclick="disableselect(this.checked)" /> Disable/Enable
<select name="singleselect" > <options></options>
  <options></options>
  <options></options>
</select>


</select>
</form>
</body>
</html>
Avatar of champ_010
champ_010

ASKER


Hi thanks for the work you are doing--but please take a look at my original layout--in all your examples you don't have checkboxes next to the selects.

What I am trying to do is have the whole form enabled or disabled--which you have already shown me 3 times.  But once that form has been enabled, there are two dropdowns that are only enabled if the checkboxes next to them are checked.  

Is this possible or impossible?
Avatar of sajuks
sajuks
If you want the above to be checkboxes jsut change the type from butto nto checkboxes.
Does that help or do you require more assistnc ?
Avatar of champ_010
champ_010

ASKER

I don't think you are understanding what I require--have you looked at my form? and my instructions next to each checkbox under the initial two?--the 2 checkboxes that are next to the select boxes...
Avatar of champ_010
champ_010

ASKER

The top 2 checkboxes enable/diable the form--once that is determined, THEN the two checkboxes below enable/disable the select box that is next to them. Two steps.
ASKER CERTIFIED SOLUTION
Avatar of i_rajeevsingh
i_rajeevsingh
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of champ_010
champ_010

ASKER


YES!!! THANK YOU RAJEEV!
Avatar of eeBlueShadow
eeBlueShadow
Hi, how about this...

<!-- START CODE -->
<script>
function tog(cb,selId)
{
    var sel = document.getElementById(selId);
    // This line disables the select when the checkbox is ON (ticked). Change it to !cb.checked if you want it the other way
    // You then need to start each checkbox as checked by default if you want that.
    sel.disabled = cb.checked;
}
</script>
<input name="checkbox1" type="checkbox" id="checkbox1" value="checkbox" onclick="tog(this,'select1')">
<select name="select1" id="select1">
     <option>a</option>
     <option>s</option>
     <option>d</option>
</select>
<br>
<input name="checkbox2" type="checkbox" id="checkbox2" value="checkbox" onclick="tog(this,'select2')">
<select name="select2" id="select2">
     <option>f</option>
     <option>g</option>
     <option>h</option>
</select>
<!-- END CODE -->

_Blue
Avatar of eeBlueShadow
eeBlueShadow
Too slow at typing, that's my problem ;)

_Blue
Avatar of mwoolgar
mwoolgar
This sounds like what you are looking for ;-)

<head>
<script language="JavaScript">
<!--

function dis_select(changestate)
{
    document.form1.singleselect.disabled = changestate;
}


// -->
</script>
</head>
<body>
<form name="form1">

<BR>
<HR>

<input type="checkbox" onclick="dis_select(this.checked)" /> Disable/Enable
  <select name="singleselect" size="1" >
    <option>a</option>
    <option>b</option>
    <option>c</option>
  </select>



</form>
</body>
</html>