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

我正在尝试根据复选框的选择启用和禁用复选框。如果您在这里查看我的代码的实时版本

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

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

为了防止您无法查看此处的链接，请参阅代码

<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>

更改此参数
为该参数生成模拟值
工程造价
平均小时数
工程完成日期
小时费率
$（文档）.ready（函数（）{
$（'#chkBox'）。单击（函数（）{
var paramchangeboxs=$（'input:checkbox.change'）；
如果（$（this）.is（':checked'））{
paramchangeboxs.attr（'disabled'，'disabled'）；
$（'chkBox1'）.attr（'disabled'，'disabled'）；
$（'chkBox'）.removeAttr（'disabled'）；
}
其他的
{
paramchangeboxs.removeAttr（'disabled'）；
$（'chkBox1'）.removeAttr（'disabled'）；
}
});
$（'#chkBoxa'）。单击（函数（）{
var paramchangeboxs=$（'input:checkbox.change'）；
如果（$（this）.is（':checked'））{
paramchangeboxs.attr（'disabled'，'disabled'）；
$（'chkBox1a'）.attr（'disabled'，'disabled'）；
$（'chkBoxa'）.removeAttr（'disabled'）；
}
其他的
{
paramchangeboxs.removeAttr（'disabled'）；
$（'chkBox1a'）.removeAttr（'disabled'）；
}
});
$（'#chkBoxb'）。单击（函数（）{
var paramchangeboxs=$（'input:checkbox.change'）；
如果（$（this）.is（':checked'））{
paramchangeboxs.attr（'disabled'，'disabled'）；
$（'chkBox1b'）.attr（'disabled'，'disabled'）；
$（'chkBoxb'）.removeAttr（'disabled'）；
}
其他的
{
paramchangeboxs.removeAttr（'disabled'）；
$（'chkBox1b'）.removeAttr（'disabled'）；
}
});
$（'#chkBoxc'）。单击（函数（）{
var paramchangeboxs=$（'input:checkbox.change'）；
如果（$（this）.is（':checked'））{
paramchangeboxs.attr（'disabled'，'disabled'）；
$（'chkBox1c'）.attr（'disabled'，'disabled'）；
$（'chkBoxc'）.removeAttr（'disabled'）；
}
其他的
{
paramchangeboxs.removeAttr（'disabled'）；
$（'chkBox1c'）.removeAttr（'disabled'）；
}
});
$（'#chkBox1'）。单击（函数（）{
var paramchangeboxs=$（'input:checkbox.sim'）；
如果（$（this）.is（':checked'））{
paramchangeboxs.attr（'disabled'，'disabled'）；
$（'chkBox'）.attr（'disabled'，'disabled'）；
$（'chkBox1'）.removeAttr（'disabled'）；
}
其他的
{
paramchangeboxs.removeAttr（'disabled'）；
$（'chkBox1'）.removeAttr（'disabled'）；
$（'chkBox'）.removeAttr（'disabled'）；
}
});
$（'#chkBox1a'）。单击（函数（）{
var paramchangeboxs=$（'input:checkbox.sim'）；
如果（$（this）.is（':checked'））{
paramchangeboxs.attr（'disabled'，'disabled'）；
$（'chkBoxa'）.attr（'disabled'，'disabled'）；
$（'chkBox1a'）.removeAttr（'disabled'）；
}
其他的
{
paramchangeboxs.removeAttr（'disabled'）；
$（'chkBox1a'）.removeAttr（'disabled'）；
$（'chkBoxa'）.removeAttr（'disabled'）；
}
});
$（'#chkBox1b'）。单击（函数（）{
var paramchangeboxs=$（'input:checkbox.sim'）；
如果（$（this）.is（':checked'））{
paramchangeboxs.attr（'disabled'，'disabled'）；
$（'chkBoxb'）.attr（'disabled'，'disabled'）；
$（'chkBox1b'）.removeAttr（'disabled'）；
}
其他的
{
paramchangeboxs.removeAttr（'disabled'）；
$（'chkBox1b'）.removeAttr（'disabled'）；
$（'chkBoxb'）.removeAttr（'disabled'）；
}
});
$（'#chkBox1c'）。单击（函数（）{
var paramchangeboxs=$（'input:checkbox.sim'）；
如果（$（this）.is（':checked'））{
paramchangeboxs.attr（'disabled'，'disabled'）；
$（'chkBoxc'）.attr（'disabled'，'disabled'）；
$（'chkBox1c'）.removeAttr（'disabled'）；
}
其他的
{
paramchangeboxs.removeAttr（'disabled'）；
$（'chkBox1c'）.removeAttr（'disabled'）；
$（'chkBoxc'）.removeAttr（'disabled'）；
}
});
});

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

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

---

尝试实现它，但不知何故似乎没有工作抱歉，当时没有时间测试。但是现在，这段代码已经过测试，可以更好地工作了。另请参见答案中代码后的详细信息。

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