Enable checkbox B only when checkbox A is enabled and the other way around.

Question

I have a two columns of checkboxes with predictable names. How can I disable a checkbox in column B when the ones in column a is unchecked and only enable it when the first the checkbox a is enabled?

 <dmf:checkbox 
 name="someNameAColumnNumber"
 value="true" 
 onclick = "enableColumnBCheckBox" runatclient="true" 
 />

Is there something like on checkvalue = true set equivalent checkbox B to true and the other way around?

EDIT the checkboxes are not in a form.. they are in a nested table.
EDIT2 should work only in IE6 (I know....) not looking for cross browser compatibility

Answer 1

are you using any javascript framework currently? if not, i recommend jQuery. this could be done in pure javascript, and it'd be pretty easy to get almost-crossbrowser-support, but for real crossbrowser support, i definitely recommend using an existing framework. assuming jQuery:

$('#checkboxA').click(function() {
    $('#checkboxB')[0].disabled = !this.checked;
});

Answer 2

Figured out a way that works as onclick event.

function toggleCheckBoxB(source) {

           var cbAID= source.id;

   var cbBID;
   cbBID= cbAID.replace("A", "B");


   if ( source.checked == 1 ) 
   {
    document.getElementById(cbBID).disabled = false;
   }
   else 
   {
    document.getElementById(cbBID).disabled = true;
    document.getElementById(cbBID).checked = 0;
   }

   }