Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 47011
  • Last Modified:

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
0
champ_010
Asked:
champ_010
  • 6
  • 4
  • 2
  • +2
1 Solution
 
sajuksCommented:
//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>
0
 
champ_010Author Commented:
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...
0
 
sajuksCommented:
<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>
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
champ_010Author Commented:

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>
0
 
sajuksCommented:
// 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>
0
 
champ_010Author Commented:

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?
0
 
sajuksCommented:
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 ?
0
 
champ_010Author Commented:
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...
0
 
champ_010Author Commented:
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.
0
 
i_rajeevsinghCommented:
Try this
---------------------------------------------------------------------------------


<script langugae="Javascript">
function toggleStatus(sel)
{
frm.all(sel).disabled=!(frm.all(sel).disabled);
}
function toggleForm(fld)
{
if(fld.checked==false)
{
frm.checkbox1.disabled=true;
frm.checkbox2.disabled=true;
}
else
{
frm.checkbox1.disabled=false;
frm.checkbox2.disabled=false;
}
}
</script>
<form name="frm">
  <p>This check box will diable the form</p>
  <p>
    <input type="checkbox" name="checkbox3" id="checkbox12" onClick="toggleForm(this)" >
  </p>
  <table width="100%" border="1">
    <tr>
      <td><p>
          <input type="checkbox" name="checkbox1" id="checkbox1" onClick="toggleStatus('select1')" disabled >
          <select name="select1" id="select1" disabled>
            <options></options> <options></options> <options></options>
          </select>
        </p>
        <p>
          <input type="checkbox" name="checkbox2"  onClick="toggleStatus('select2')" disabled>
          <select name="select2" id="select2" disabled>
            <options></options> <options></options> <options></options>
          </select>
        </p>
      </td>
    </tr>
  </table>
  </form>


---------------------------------------
Regards
Rajeev
0
 
champ_010Author Commented:

YES!!! THANK YOU RAJEEV!
0
 
eeBlueShadowCommented:
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
0
 
eeBlueShadowCommented:
Too slow at typing, that's my problem ;)

_Blue
0
 
mwoolgarCommented:
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>
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.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 4
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now