PDA

View Full Version : Enable Drop Down Box ONLY if Checkbox is Selected

sueberry
12-17-2004, 09:07 PM
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) :)


<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>
Willy Duitt
12-17-2004, 09:13 PM
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...


<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
sueberry
12-17-2004, 09:25 PM
Willy,

Thank you!! It works!

Shannon
sueberry
12-20-2004, 03:17 PM
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
Willy Duitt
12-20-2004, 05:41 PM
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
sueberry
12-20-2004, 06:14 PM
Okay, thanks...I will give it a try.

Shannon
Willy Duitt
12-21-2004, 07:19 PM
Re: Problems which became apparent in this thread (http://www.codingforums.com/showthread.php?t=49255).... I updated the function to target only those selects with a name beginning with COPIES_ and checkboxes whose parentNode contain those selects...


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