Solved

Checkbox disable Select Box

Posted on 2004-04-27
14
46,980 Views
Last Modified: 2012-08-14

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
Comment
Question by:champ_010
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
  • 2
  • +2
14 Comments
 
LVL 33

Expert Comment

by:sajuks
ID: 10935147
//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
 
LVL 1

Author Comment

by:champ_010
ID: 10935294
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
 
LVL 33

Expert Comment

by:sajuks
ID: 10935456
<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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:champ_010
ID: 10935492

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
 
LVL 33

Expert Comment

by:sajuks
ID: 10935546
// 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
 
LVL 1

Author Comment

by:champ_010
ID: 10935660

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
 
LVL 33

Expert Comment

by:sajuks
ID: 10935662
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
 
LVL 1

Author Comment

by:champ_010
ID: 10935713
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
 
LVL 1

Author Comment

by:champ_010
ID: 10935724
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
 
LVL 1

Accepted Solution

by:
i_rajeevsingh earned 200 total points
ID: 10935957
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
 
LVL 1

Author Comment

by:champ_010
ID: 10935989

YES!!! THANK YOU RAJEEV!
0
 
LVL 10

Expert Comment

by:eeBlueShadow
ID: 10936055
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
 
LVL 10

Expert Comment

by:eeBlueShadow
ID: 10936060
Too slow at typing, that's my problem ;)

_Blue
0
 

Expert Comment

by:mwoolgar
ID: 12110578
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

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…
Suggested Courses

635 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