Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Enable/disable group of checkboxes dependent on other checkbox state 2

Status
Not open for further replies.
lastdonuk

lastdonuk

Programmer
Jan 19, 2005
58
0
0
GB
Hi,

I have a form which needs more javascript validation than I have the knowledge to provide.
The form contains 5 checkboxes. The first condition I've managed to code the validation for: Either option 1 OR option 2 can be - but doesn't have to be - checked.
The second condition is that IF option 1 or 2 ARE checked then options 3, 4 and 5 become enabled. Obviously, if both option 1 and option 2 become unchecked, these "conditional" options must become unchecked and disabled.
I'd really appreciate a little assistance here, my javascript is just not up to this yet!

The page is here.

And the code is as follows:

Code: 
<html>
<head>
<title>checkboxtastic</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="form_style.css">
<script type="text/javascript">
function oneOrNoCheckboxGroup(checkbox) 
{
  var checkboxGroup = checkbox.form[checkbox.name];
  
  for (var c = 0; c < checkboxGroup.length; c++)
    if (checkboxGroup[c] != checkbox)
      checkboxGroup[c].checked = false;
}
</script>
</head>

<body>
<form action="checkbox.asp" method="post" id="form1" name="form1">
	<table border="0" width="600">
		<tr class="an10" bgcolor="#EAD5EA">
	  		<td class="an10" bgcolor="#EAD5EA"><b><i>Either</i></b></td>
	  		<td class="an10" bgcolor="#EAD5EA">Option 1</td>
	  		<td align="left" class="an10" bgcolor="#EAD5EA"><input type="checkbox" name="option" id="option1" onclick="oneOrNoCheckboxGroup(this);"></td>
		</tr>
		<tr class="an10" bgcolor="#EAD5EA">
	  		<td class="an10" bgcolor="#EAD5EA"><b><i>Or</i></b></td>
	  		<td class="an10" bgcolor="#EAD5EA">Option 2</td>
		  	<td align="left" class="an10" bgcolor="#EAD5EA"><input type="checkbox" name="option" id="option2" onclick="oneOrNoCheckboxGroup(this);"></td>
		</tr>
	  	<tr class="an10" bgcolor="#EAD5EA">
	  		<td class="an10" bgcolor="#EAD5EA"></td>
	  		<td align="left" class="an10" bgcolor="#EAD5EA">Option 3</td>
	  		<td align="left" class="an10" bgcolor="#EAD5EA"><input type="checkbox" name="option3" id="option3" disabled></td>
		</tr>
	  	<tr class="an10" bgcolor="#EAD5EA">
	  		<td class="an10" bgcolor="#EAD5EA"></td>
	  		<td align="left" class="an10" bgcolor="#EAD5EA">Option 4</td> 
	  		<td align="left" class="an10" bgcolor="#EAD5EA"><input type="checkbox" name="option4" id="option4" disabled></td>
		</tr>
	  	<tr class="an10" bgcolor="#EAD5EA">
	  		<td class="an10" bgcolor="#EAD5EA"></td>
	  		<td align="left" class="an10" bgcolor="#EAD5EA">Option 5</td>
	  		<td align="left" class="an10" bgcolor="#EAD5EA"><input type="checkbox" name="option5" id="option5" disabled></td>
		</tr>
	</table>
</form>
</body>
</html>

Thanks for any help and guidance you can give me.

Rob
 
Sort by date Sort by votes
This might help with part of the second condition.

Try using this onClick on options 1 and 2 checkboxes.

Code: 
onClick='document.myForm.option3.disabled = false;'document.myForm.option4.disabled = false;'document.myForm.option5.disabled = false;

This should work, but I didn't test it.
 
Upvote 0 Downvote
Watch out how I would combine naming convention and handler to get to this functionality. I would not bother to spell out the detail. You read it and try to see why. (Note: be careful of your naming. Apart from naming system, avoid as far as possible direct collision with language-related words like checkbox, option etc.)

[tt]
<html>
<head>
<title>checkboxtastic</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="form_style.css">
<script type="text/javascript">
function oneOrNoCheckboxGroup(obj)
{
var checkboxGroup = document.getElementsByName(obj.name);
var bchosen=false;

for (var c = 0; c < checkboxGroup.length; c++) {
if (checkboxGroup[c].checked) {
bchosen=true;
break;
}
}

var checkboxGroup_derived = document.getElementsByName(obj.name + "_derived");
if (bchosen) {
for (var c = 0; c<checkboxGroup_derived.length; c++) {
checkboxGroup_derived[c].disabled = false;
}
} else {
for (var c = 0; c<checkboxGroup_derived.length; c++) {
checkboxGroup_derived[c].checked = false;
checkboxGroup_derived[c].disabled = true;
}
}
}
</script>
</head>

<body>
<form action="checkbox.asp" method="post" id="form1" name="form1">
<table border="0" width="600">
<tr class="an10" bgcolor="#EAD5EA">
<td class="an10" bgcolor="#EAD5EA"><b><i>Either</i></b></td>
<td class="an10" bgcolor="#EAD5EA">Option 1</td>
<td align="left" class="an10" bgcolor="#EAD5EA"><input type="checkbox" name="opt" id="option1" onclick="oneOrNoCheckboxGroup(this);"></td>
</tr>
<tr class="an10" bgcolor="#EAD5EA">
<td class="an10" bgcolor="#EAD5EA"><b><i>Or</i></b></td>
<td class="an10" bgcolor="#EAD5EA">Option 2</td>
<td align="left" class="an10" bgcolor="#EAD5EA"><input type="checkbox" name="opt" id="option2" onclick="oneOrNoCheckboxGroup(this);"></td>
</tr>
<tr class="an10" bgcolor="#EAD5EA">
<td class="an10" bgcolor="#EAD5EA"></td>
<td align="left" class="an10" bgcolor="#EAD5EA">Option 3</td>
<td align="left" class="an10" bgcolor="#EAD5EA"><input type="checkbox" name="opt_derived" id="option3" disabled></td>
</tr>
<tr class="an10" bgcolor="#EAD5EA">
<td class="an10" bgcolor="#EAD5EA"></td>
<td align="left" class="an10" bgcolor="#EAD5EA">Option 4</td>
<td align="left" class="an10" bgcolor="#EAD5EA"><input type="checkbox" name="opt_derived" id="option4" disabled></td>
</tr>
<tr class="an10" bgcolor="#EAD5EA">
<td class="an10" bgcolor="#EAD5EA"></td>
<td align="left" class="an10" bgcolor="#EAD5EA">Option 5</td>
<td align="left" class="an10" bgcolor="#EAD5EA"><input type="checkbox" name="opt_derived" id="option5" disabled></td>
</tr>
</table>

</form>
</body>
</html>
[/tt]
 
Upvote 0 Downvote
bmanning2 - your code works until you decide "oh, i don't want any options after all" then options 3,4 and 5 remain enabled and checked but I can look at that, thanks very much for your help.

tsuji - this works really well, thanks - i'll now take a good look at it. One thing, I see that the user can checked both options 1 and 2, but I can handle that in the submit validation anyway if I can't work this out for myself.
I will also take heed of your comments on naming conventions, I should know better by now!

Thank you both so much.

Rob
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
4
Views
265
Mike Lewis
Mike Lewis
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
174
Kennelbloke
Kennelbloke
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
133
Rayj0000
Rayj0000
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
181
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
153
malpa
malpa

Part and Inventory Search

Sponsor

Back
Top