Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Dec 2004
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Enable Drop Down Box ONLY if Checkbox is Selected

    I am just a beginner with JavaScript and I have run into a problem with a form I'm developing...any help with this would be GREATLY appreciated! I have several drop down boxes with checkboxes next to each one. I would like for the drop down boxes to be disabled unless the check box next to it is selected. Also, if the user selects the check box then deselects it, I would like the box to go back to being disabled. Any helpful tips or ideas on this one?? Here is my code: (Thanks in advance for your time)

    Code:
    <html>
    <head>
    <title>Tippecanoe County GIS Request Form</title>
    <style>
    
    </style>
    
    <script type="text/javascript" language="JavaScript">
    
    </script>
    </head>
    <body>
    <form name="frmGISRequest">
    
    <table border="1" width="900" align="center">
    <tr>
        <td colspan="2" width = "100%"><b>PAPER SIZE:</b></td>
    </tr>
     <tr><td width = "15%">&nbsp;&nbsp;&nbsp;A(8 1/2" X 11")</td>
        <td width = "85%" align = "left">  <input type="checkbox" name="A" value="yes">&nbsp;&nbsp;&nbsp;
          <select name="COPIES_A" disabled>
            <option value="0">NUMBER OF COPIES
            <option value="1">1
            <option value="2">2
            <option value="3">3
            <option value="4">4
            <option value="5">5
          </select></td>
    </tr>
    <tr>
    <td width = "15%">&nbsp;&nbsp;&nbsp;B(11" X 17")</td>
         <td width = "85%" align = "left"><input type="checkbox" name="B" value="yes">&nbsp;&nbsp;&nbsp;
         <select name="COPIES_B">
            <option value="0">NUMBER OF COPIES
            <option value="1">1
            <option value="2">2
            <option value="3">3
            <option value="4">4
            <option value="5">5
          </select></td>
    </tr>
    <tr>
    <td width = "15%">
        &nbsp;&nbsp;&nbsp;C(18" X 24")</td>
        <td width = "85%" align = "left"><input type="checkbox" name="C" value="yes">&nbsp;&nbsp;&nbsp;
        <select name="COPIES_C">
            <option value="0">NUMBER OF COPIES
            <option value="1">1
            <option value="2">2
            <option value="3">3
            <option value="4">4
            <option value="5">5
          </select></td>
    </tr>
    <tr>
    <td width = "15%">&nbsp;&nbsp;&nbsp;D(24" X 36")</td>
         <td width = "85%" align = "left"><input type="checkbox" name="D" value="yes">&nbsp;&nbsp;&nbsp;
         <select name="COPIES_D>
            <option value="0">NUMBER OF COPIES
            <option value="1">1
            <option value="2">2
            <option value="3">3
            <option value="4">4
            <option value="5">5
          </select>
    </td>
    </tr>
    <tr>
      <td width = "15%">
          &nbsp;&nbsp;&nbsp;E(36" X 48")</td>
          <td width = "85%" align = "left"><input type="checkbox" name="E" value="yes">&nbsp;&nbsp;&nbsp;
          <select name="COPIES_E">
            <option value="0">NUMBER OF COPIES
            <option value="1">1
            <option value="2">2
            <option value="3">3
            <option value="4">4
            <option value="5">5
          </select>
    </td></tr>    
    <tr><td colspan = "2">&nbsp;</td>
    </tr>
    </table>
    </body>
    </html>

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Per the example...
    Place the script within the HEAD of the document and add the onload event to the body tag, targetting the form name as a function arguement...

    Code:
    <html>
    <head>
    <title>Tippecanoe County GIS Request Form</title>
    <script type="text/javascript">
     <!--// Written by: WillyDuitt@hotmail.com \\;
      function disableSelects(form){
        for(var i=0;i<form.elements.length;i++){
          if(form.elements[i].type.match(/select/i)){
             form.elements[i].disabled = 1;
          }
          if(form.elements[i].type.match(/checkbox/i)){
             form.elements[i].onclick = function(){
             this.parentNode.getElementsByTagName('select')[0].disabled =
             this.parentNode.getElementsByTagName('select')[0].disabled == 0 ? 1 : 0; 
            }
          }
        }
      }
     //-->
    </script>
    </head>
    
    <body onload="disableSelects(document.forms['frmGISRequest'])">
    <form name="frmGISRequest">
    <table border="1" width="900" align="center">
    <tr>
        <td colspan="2" width = "100%"><b>PAPER SIZE:</b></td>
    </tr>
     <tr><td width = "15%">&nbsp;&nbsp;&nbsp;A(8 1/2" X 11")</td>
        <td width = "85%" align = "left">  <input type="checkbox" name="A" value="yes">&nbsp;&nbsp;&nbsp;
          <select name="COPIES_A">
            <option value="0">NUMBER OF COPIES
            <option value="1">1
            <option value="2">2
            <option value="3">3
            <option value="4">4
            <option value="5">5
          </select></td>
    </tr>
    <tr>
    <td width = "15%">&nbsp;&nbsp;&nbsp;B(11" X 17")</td>
         <td width = "85%" align = "left"><input type="checkbox" name="B" value="yes">&nbsp;&nbsp;&nbsp;
         <select name="COPIES_B">
            <option value="0">NUMBER OF COPIES
            <option value="1">1
            <option value="2">2
            <option value="3">3
            <option value="4">4
            <option value="5">5
          </select></td>
    </tr>
    <tr>
    <td width = "15%">
        &nbsp;&nbsp;&nbsp;C(18" X 24")</td>
        <td width = "85%" align = "left"><input type="checkbox" name="C" value="yes">&nbsp;&nbsp;&nbsp;
        <select name="COPIES_C">
            <option value="0">NUMBER OF COPIES
            <option value="1">1
            <option value="2">2
            <option value="3">3
            <option value="4">4
            <option value="5">5
          </select></td>
    </tr>
    <tr>
    <td width = "15%">&nbsp;&nbsp;&nbsp;D(24" X 36")</td>
         <td width = "85%" align = "left"><input type="checkbox" name="D" value="yes">&nbsp;&nbsp;&nbsp;
         <select name="COPIES_D">
            <option value="0">NUMBER OF COPIES
            <option value="1">1
            <option value="2">2
            <option value="3">3
            <option value="4">4
            <option value="5">5
          </select>
    </td>
    </tr>
    <tr>
      <td width = "15%">
          &nbsp;&nbsp;&nbsp;E(36" X 48")</td>
          <td width = "85%" align = "left"><input type="checkbox" name="E" value="yes">&nbsp;&nbsp;&nbsp;
          <select name="COPIES_E">
            <option value="0">NUMBER OF COPIES
            <option value="1">1
            <option value="2">2
            <option value="3">3
            <option value="4">4
            <option value="5">5
          </select>
    </td></tr>    
    <tr><td colspan = "2">&nbsp;</td>
    </tr>
    </table>
    </form>
    </body>
    </html>
    .....Willy

  • #3
    New Coder
    Join Date
    Dec 2004
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks!!

    Willy,

    Thank you!! It works!

    Shannon

  • #4
    New Coder
    Join Date
    Dec 2004
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Added another drop down box to form and want it to be enabled

    I added another drop down box to this form and it is disabled because of the disableSelects() function. I would like to keep this funciton because it works great for the group of drop down boxes I orginally asked about. Does anyone know what I need to do to get the other dropdown box to be enabled instead of disabled?? Thanks for any help with this!!

    Shannon

  • #5
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Several methods come to mind...

    Give the selct and checkbox you wish to toggle the select a class name and add a conditional statement that checks for the className or give add those form elements names to the current conditional statements...

    .....Willy

  • #6
    New Coder
    Join Date
    Dec 2004
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks

    Okay, thanks...I will give it a try.

    Shannon

  • #7
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Re: Problems which became apparent in this thread.... I updated the function to target only those selects with a name beginning with COPIES_ and checkboxes whose parentNode contain those selects...

    Code:
      function disableSelects(form){
        for(var i=0;i<form.elements.length;i++){
         var input = form.elements[i];
          if(input.type.match(/select/i) && 
             input.name.match(/^copies_/i)){ 
             input.disabled = 1;
          }
          if(input.type.match(/checkbox/i) && 
             input.parentNode.getElementsByTagName('select')[0] && 
             input.parentNode.getElementsByTagName('select')[0].name.match(/^copies_/i)){ 
             input.onclick = function(){
               var select = this.parentNode.getElementsByTagName('select')[0];
                   select.disabled = select.disabled == 0 ? 1 : 0; 
            }
          }
        }
      }
    .....Willy


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •