...

View Full Version : Disable all other checkboxes when this checkbox checked?



quadrant6
04-17-2005, 03:25 AM
I have a form containing a bunch of input fields (many are checkboxes) and am having trouble trying to figure out how to do the following:

Within all checkboxes, there are 4 of particular interest. When the first is selected - the other 3 should be disabled (not all checkboxes in the form, just these 3).

I figure I need some way to dientify these 3 and then call a function when the first is clicked.

But how do I identify them without using their input name (which is dynamically generated and used for something else)

Does anyone have any suggestions or examples of anything similar?

vwphillips
04-17-2005, 10:32 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>
</head>

<body onload="f7_DisableCBGroup()" >

<table width="300" cellpadding="0" cellspacing="0" border="0" style="position:relative;left:30px;" >
<tr>
<td width="50%">
Group 1<br>
<span title="Group1" >
<input title="Group 1 A" type="checkbox" name="" checked=true ><br>
<input title="Group 1 B" type="checkbox" name=""><br>
<input title="Group 1 C" type="checkbox" name=""><br>
</span>
<span title="Group1f7_Master" >
<input title="Group 1 Master" type="checkbox" name=""><span id="fredTxt" >Master</span><br>
</span>
</td>
<td width="50%">
Group 2<br>
<span title="Group2" >
<input title="Group 2 A" type="checkbox" name="" checked=true ><br>
<input title="Group 2 B" type="checkbox" name=""><br>
<input title="Group 2 C" type="checkbox" name=""><br>
</span>
<span title="Group2f7_Master" >
<input title="Group 2 Master" type="checkbox" name=""><span id="fredTxt" >Master</span><br>
</span>
</td>
</tr>
</table>
<br>
<br>
<script language="JavaScript" type="text/javascript">
<!--
// Form Compendium f5 (17-04-2005)
// Disable CB Group
// by Vic Phillips http://www.vicsjavascripts.org.uk

// Change a group of Check Boxes to disabled=true or disabled=false;

// Application Notes

// The check box group is definded by the check boxes with a parent of the same title
// A check box with a parent node of the group title suffixed with 'f7_Master'
// is used to set the disable status of the other check boxes
// Example HTML Code for one group
// <span title="Group1" >
// <input title="Group 1 A" type="checkbox" name="" checked=true ><br>
// <input title="Group 1 B" type="checkbox" name=""><br>
// <input title="Group 1 C" type="checkbox" name=""><br>
// </span>
// <span title="Group1f7_Master" >
// <input title="Group 1 Master" type="checkbox" name=""><span id="fredTxt" >Master</span><br>
// </span>

// Each group is initialised from a <body> onload event
// <body onload="f7_DisableCBGroup();" >
// where

// All variable, function etc. names are prefixed with 'f7_' to minimise conflicts with other javascripts


var f7_cks;

function f7_DisableCBGroup(f7_cb){
f7_cks=document.getElementsByTagName('INPUT');
for (f7_0=0;f7_0<f7_cks.length;f7_0++){
if (f7_cks[f7_0].type=='checkbox'){
if (f7_cks[f7_0].parentNode.title.match('f7_Master')){
f7_Disable(f7_cks[f7_0])
f7_cks[f7_0].onclick=function(){ f7_Disable(this); }
}
}
}
}

function f7_Disable(f7_obj){
for (f7_1=0;f7_1<f7_cks.length;f7_1++){
if (f7_cks[f7_1].parentNode.title==f7_obj.parentNode.title.replace('f7_Master','')){
if (f7_obj.checked){
f7_cks[f7_1].setAttribute('disabled',true)
}
else {
f7_cks[f7_1].removeAttribute('disabled')
}
}
}
}


//-->
</script>
</body>

</html>


I am putting together a Compendium of form utilities

for a preview see
http://www.vicsjavascripts.org.uk/FormCompendium/FormCompendium.htm

quadrant6
04-17-2005, 11:25 PM
Thanks, that seems to work pretty well.

1 small thing is that when you click the master (the others become disabled but not unchecked). It may be nice for user feedback if they are unchecked as well as being disabled.

I attemped to do this by adding (bold):



function f7_Disable(f7_obj){
for (f7_1=0;f7_1<f7_cks.length;f7_1++){
if (f7_cks[f7_1].parentNode.title==f7_obj.parentNode.title.replace('f7_Master','')){
if (f7_obj.checked){
f7_cks[f7_1].removeAttribute('checked')
f7_cks[f7_1].setAttribute('disabled',true)
}


.. but it doesn't seem to work.

glenngv
04-18-2005, 07:14 AM
f7_cks[f7_1].checked = false;



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum