views:

382

answers:

1

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"&gt;
<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>
A: 

I'm not entirely sure of the affect you want, but here are the broad rules. You need something in your HTML to tell your js which should affect which. Attributes are best, either rel or id or, simplest, class.

So, give each .father an ID that's unique to it among .fathers.

<input type="checkbox" value="2" class="father" id="foo">
<input type="checkbox" value="3" class="father" id="bar">

Then give the children corresponding/identical classes.

<input type="checkbox" value="1" class="child foo">
<input type="checkbox" value="2" class="child bar">

(By the way, you're not using XHTML, so you don't need the trailing slashes.)

I don't know Prototype, but what you then need to do is, for each .father, grab the id (#foo and #bar above) and look for all checkboxes with classes .child and either .foo or .bar, depending. (You can pull off that last bit by storing the id to a variable, and altering the text to add on the period and make it a class.)

D_N
Can you write any example here?
BoDiE2003