Help with enable disable checkboxes using Jquery

Question

I am trying to enable and disable checkboxes based on selection of checkboxes. If you take a look here for a live version of my code http://jsfiddle.net/prady/VZ4yW/3/

What i want is there cannot be 2 checkboxes selected in the same row and there cannot be 2 checkboxes selected in the same column. Looking at the link might give you a clear understanding of what i wanted.

There can be only one checkbox selected in the column "Change this parameter" and "Generate simulated value for this param" but both cant be of the same row.

Just in case you are not able to view the link here is the code

<table>
<tr>
<td></td>
<td></td>
<td>Change this parameter</td>
<td>Generate simulated value for this param</td>

</tr>
<tr>
<td>Project cost</td>
<td><input type ="text" id ="pc"/></td>
<td><input class="change" type="checkbox" name="chkBox" id="chkBox"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1" id="chkBox1"></input></td>

</tr>
<tr>
<td>Avg hours</td>
<td><input type ="text" id ="avghrs"/></td>
<td><input class="change" type="checkbox" name="chkBoxa" id="chkBoxa"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1a" id="chkBox1a"></input></td>

</tr>
<tr>
<td>Project completion date</td>
<td><input type ="text" id ="cd"/></td>
<td><input class="change" type="checkbox" name="chkBoxb" id="chkBoxb"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1b" id="chkBox1b"></input></td>

</tr>
<tr>
<td>Hourly rate</td>
<td><input type ="text" id ="hr"/></td>
<td><input class="change" type="checkbox" name="chkBoxc" id="chkBoxc"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1c" id="chkBox1c"></input></td>

</tr>
</table>
<script type="text/javascript">
$(document).ready(function(){
$('#chkBox').click(function(){
   var paramChangeBoxes = $('input:checkbox.change');
 if ($(this).is(':checked')) {
  paramChangeBoxes.attr('disabled', 'disabled');
  $('#chkBox1').attr('disabled', 'disabled');
   $('#chkBox').removeAttr('disabled');
 }
 else
 {
  paramChangeBoxes.removeAttr('disabled');
      $('#chkBox1').removeAttr('disabled');
 }
});
$('#chkBoxa').click(function(){
   var paramChangeBoxes = $('input:checkbox.change');
 if ($(this).is(':checked')) {
  paramChangeBoxes.attr('disabled', 'disabled');
  $('#chkBox1a').attr('disabled', 'disabled');
   $('#chkBoxa').removeAttr('disabled');
 }
 else
 {
  paramChangeBoxes.removeAttr('disabled');
      $('#chkBox1a').removeAttr('disabled');
 }
});

$('#chkBoxb').click(function(){
   var paramChangeBoxes = $('input:checkbox.change');
 if ($(this).is(':checked')) {
  paramChangeBoxes.attr('disabled', 'disabled');
  $('#chkBox1b').attr('disabled', 'disabled');
   $('#chkBoxb').removeAttr('disabled');
 }
 else
 {
  paramChangeBoxes.removeAttr('disabled');
      $('#chkBox1b').removeAttr('disabled');
 }
});

$('#chkBoxc').click(function(){
   var paramChangeBoxes = $('input:checkbox.change');
 if ($(this).is(':checked')) {
  paramChangeBoxes.attr('disabled', 'disabled');
  $('#chkBox1c').attr('disabled', 'disabled');
   $('#chkBoxc').removeAttr('disabled');
 }
 else
 {
  paramChangeBoxes.removeAttr('disabled');
      $('#chkBox1c').removeAttr('disabled');
 }
});

$('#chkBox1').click(function(){
   var paramChangeBoxes = $('input:checkbox.sim');
 if ($(this).is(':checked')) {
  paramChangeBoxes.attr('disabled', 'disabled');
  $('#chkBox').attr('disabled', 'disabled');
   $('#chkBox1').removeAttr('disabled');
 }
 else
 {
  paramChangeBoxes.removeAttr('disabled');
      $('#chkBox1').removeAttr('disabled');
       $('#chkBox').removeAttr('disabled');
 }
});

$('#chkBox1a').click(function(){
   var paramChangeBoxes = $('input:checkbox.sim');
 if ($(this).is(':checked')) {
  paramChangeBoxes.attr('disabled', 'disabled');
  $('#chkBoxa').attr('disabled', 'disabled');
   $('#chkBox1a').removeAttr('disabled');
 }
 else
 {
  paramChangeBoxes.removeAttr('disabled');

      $('#chkBox1a').removeAttr('disabled');
       $('#chkBoxa').removeAttr('disabled');

 }
});

$('#chkBox1b').click(function(){
   var paramChangeBoxes = $('input:checkbox.sim');
 if ($(this).is(':checked')) {
  paramChangeBoxes.attr('disabled', 'disabled');
  $('#chkBoxb').attr('disabled', 'disabled');
   $('#chkBox1b').removeAttr('disabled');

 }
 else
 {
  paramChangeBoxes.removeAttr('disabled');

      $('#chkBox1b').removeAttr('disabled');
       $('#chkBoxb').removeAttr('disabled');

 }
});

$('#chkBox1c').click(function(){
   var paramChangeBoxes = $('input:checkbox.sim');
 if ($(this).is(':checked')) {
  paramChangeBoxes.attr('disabled', 'disabled');
  $('#chkBoxc').attr('disabled', 'disabled');
   $('#chkBox1c').removeAttr('disabled');
 }
 else
 {
  paramChangeBoxes.removeAttr('disabled');

      $('#chkBox1c').removeAttr('disabled');
        $('#chkBoxc').removeAttr('disabled');
 }
});



});
</script>

Answer 1

You need to store busyRows and busyCols and add row and col attr to checkbox; Update them after each change event and then update disabled attributes.

function getCB_x(elt) { return elt.parentNode.cellIndex; }
function getCB_y(elt) { return elt.parentNode.parentNode.rowIndex; }
$(document).ready(function(){
  var busyRows = [], busyCols = [];

  var checkboxes = $("table input[type=checkbox]");
  // get topleft checkbox
  var firstCb = checkboxes[0];
  // and calculate its offsets
  var colOffset = getCB_x(firstCb);
  var rowOffset = getCB_y(firstCb)

  // get bottomright checkbox
  var lastCb = checkboxes.last()[0];
  // calculate offsets and init busy flags
  for (var i = getCB_x(lastCb) - colOffset; i >=0; i--) busyCols[i] = false;
  for (var i = getCB_y(lastCb) - rowOffset; i >=0; i--) busyRows[i] = false;

  // define callback
  function updateCB(){
    var col = getCB_x(this) - colOffset;
    var row = getCB_y(this) - rowOffset;
    // set corresponding row and col as "busy"
    busyRows[row] = this.checked;
    busyCols[col] = this.checked;
    // update column with current checkbox
    for (var r = 0; r < busyRows.length; r++) {
      cb = checkboxes[r*busyCols.length+col];
      if ((busyRows[r] || busyCols[col]) && !cb.checked) {
        $(cb).attr('disabled', 'disabled');
      } else {
        $(cb).removeAttr('disabled', 'disabled');
      }
    }
    // update row with current checkbox
    for (var c = 0; c < busyCols.length; c++) {
      cb = checkboxes[row*busyCols.length+c];
      if ((busyRows[row] || busyCols[c]) && !cb.checked) {
        $(cb).attr('disabled', 'disabled');
      } else {
        $(cb).removeAttr('disabled', 'disabled');
      }
    }
  }
  // update state for already set items
  for (var i = 0; i < checkboxes.length; i++) {
     var cb = checkboxes[i];
     if (cb.checked) updateCB.call(cb);
  }
  // assign onlick handler
  checkboxes.click(updateCB);
});

This code will work for any regular dense grid of checkboxes. Regular means that every row should have the same amount of checkboxes and every column should have the same amount of checkboxes. Dense means there should be no rows w/o chekcboxes between rows with checkboxes. The same for columns.

If you'll have additional checkboxes in table, which should not be included in grid, add some class to them (e.g. "non-grid") and select only cb's w/o that class:

var checkboxes = $("table input[type=checkbox]:not(.non-grid)");