Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Checkbox disable Select Box

Posted on 2004-04-27
14
Medium Priority
?
46,986 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
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 800 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

Industry Leaders: 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!

Question has a verified solution.

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

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…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

705 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