Solved

Checkbox disable Select Box

Posted on 2004-04-27
14
46,953 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
  • 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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

759 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

19 Experts available now in Live!

Get 1:1 Help Now