帮助使用 Jquery 启用禁用复选框

Question

我正在尝试根据复选框的选择启用和禁用复选框。如果您在这里查看我的代码的实时版本 http://jsfiddle.net/prady/VZ4yW/3/

我想要的是不能在同一行中选择 2 个复选框，并且不能在同一列中选择 2 个复选框。查看链接可能会让您清楚地了解我想要什么。

“更改此参数”和“生成此参数的模拟值”列中只能选择一个复选框，但不能在同一行。

以防万一您无法查看此处的链接是代码

<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

您需要存储busyRows 和busyCols 并将row 和col attr 添加到复选框； 在每次更改事件后更新它们，然后更新禁用的属性。

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

此代码适用于任何规则密集的复选框网格。 Regular 意味着每一行应该有相同数量的复选框，每列应该有相同数量的复选框。 密集 意味着在带有复选框的行之间不应该有没有复选框的行。列也是如此。

如果您将在表格中添加不应包含在网格中的其他复选框，请向它们添加一些类（例如“非网格”）并仅选择不带该类的 cb：

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