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:
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');
}
});
});
});