Javascript: Dynamic Check box (Fieldset with Father/Child Checkboxes)
- by BoDiE2003
I have a problem here, when I select any of the 'father' checkboxes all the child checkboxes are getting enabled or disabled. So I need each father checkbox to affect it own child fieldset. Could someone help me with this.
Thank you
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>toggle disabled</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.cssDisabled { color: #ccc; }
</style>
<script src="http://prototypejs.org/assets/2009/8/31/prototype.js" type="text/javascript"> </script>
<script type="text/javascript">
Event.observe(window, 'load', function(){
// for all items in the group_first class
$$('.father').each(function(chk1){
// watch for clicks
chk1.observe('click', function(evt){
dynamicCheckbox();
});
dynamicCheckbox();
});
});
function dynamicCheckbox (){
// count how many of group_first are checked,
// doEnable true if any are checked
var doEnable = ($$('.father:checked').length > 0) ? true : false;
// for each in group_second, enable the checkbox, and
// remove the cssDisabled class from the parent label
$$('.child').each(function(item){
if (doEnable) {
item.enable().up('label').removeClassName('cssDisabled');
} else {
item.disable().up('label').addClassName('cssDisabled');
}
});
};
</script>
</head>
<body>
<fieldset>
<legend>First Group</legend>
<label><input type="checkbox" value="1" class="father" />Check box 1</label><br />
<label><input type="checkbox" value="2" class="father" checked/>Check box 2</label>
</fieldset>
<fieldset>
<legend>Second Group</legend>
<label class="cssDisabled"><input type="checkbox" value="x" class="child" disabled="disabled" />Check box x</label><br />
<label class="cssDisabled"><input type="checkbox" value="y" class="child" disabled="disabled" />Check box y</label><br />
<label class="cssDisabled"><input type="checkbox" value="z" class="child" disabled="disabled" />Check box z</label>
</fieldset>
<fieldset>
<legend>First Group</legend>
<label><input type="checkbox" value="3" class="father" />Check box 1</label><br />
</fieldset>
<fieldset>
<legend>Second Group</legend>
<label class="cssDisabled"><input type="checkbox" value="x" class="child" disabled="disabled" />Check box x</label><br />
<label class="cssDisabled"><input type="checkbox" value="y" class="child" disabled="disabled" />Check box y</label><br />
<label class="cssDisabled"><input type="checkbox" value="z" class="child" disabled="disabled" />Check box z</label>
</fieldset>
</body>
</html>
