Question

Ive been using jquery to do this, but now I need to do it with Prototype and Im little confused due lack of documentation

I have 2 lists of check boxes

First List:

Check box 1
Check box 2

Second list:

Check box x
check box y
check box z

I need the JS code, using prototype to work like this: Second list, remains disabled unless I check one of the checkboxes of the First List.

Any suggestions?

Answer 1

Here’s the JavaScript code:

Event.observe(window, 'load', function(){
    // for all items in the group_first class
    $$('.group_first').each(function(chk1){
        // watch for clicks
        chk1.observe('click', function(evt){
            // count how many of group_first
            // are checked, true if any are checked
            var doEnable = ($$('.group_first:checked').length > 0);
            // for each in group_second, enable the
            // checkbox, and remove the cssDisabled class
            $$('.group_second').each(function(item){
                if (doEnable) {
                    item.enable().up('label').removeClassName('cssDisabled');
                } else {
                    item.disable().up('label').addClassName('cssDisabled');
                }
            });
        });
    });
});

Based on this HTML:

<fieldset>
    <legend>First Group</legend>
    <label><input type="checkbox" value="1"
        class="group_first" />Check box 1</label><br />
    <label><input type="checkbox" value="2"
        class="group_first" />Check box 2</label>
</fieldset>


<fieldset>
    <legend>Second Group</legend>
    <label class="cssDisabled"><input type="checkbox" value="x"
        class="group_second" disabled="disabled" />Check box x</label><br />
    <label class="cssDisabled"><input type="checkbox" value="y"
        class="group_second" disabled="disabled" />Check box y</label><br />
    <label class="cssDisabled"><input type="checkbox" value="z"
        class="group_second" disabled="disabled" />Check box z</label>
</fieldset>

Add this CSS:

.cssDisabled { color: #ccc; }

The documentation for Prototype is very good. Here’s the methods I’m using:

• http://www.prototypejs.org/api/utility/dollar-dollar
• http://www.prototypejs.org/api/event/observe
• http://www.prototypejs.org/api/enumerable/each
• http://www.prototypejs.org/api/element/methods/up
• http://www.prototypejs.org/api/event/observe
• http://www.prototypejs.org/api/form/enable
• http://www.prototypejs.org/api/form/disable
• http://www.prototypejs.org/api/element/addclassname
• http://www.prototypejs.org/api/element/removeclassname

For those of you interested in how this can be done in jQuery:

jQuery(document).ready(function(){ 
   $('.group_first').bind('click', function(){
        var doEnable = ($('.group_first:checked').length > 0);
        $('.group_second').each(function(){
            if (doEnable) {
                $(this).attr('disabled', null);
                $(this).parents('label').removeClass('cssDisabled');
            } else {
                $(this).attr('disabled', 'disabled');
                $(this).parents('label').addClass('cssDisabled');
            }
        });
    });
});