如何根据响应的行和列显示和禁用复选框？

<table>
  <tr>
    <th></th>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
  <tr>
    <td>行1</td>
    <td><input type="checkbox" id="checkbox-1-1"></td>
    <td><input type="checkbox" id="checkbox-1-2"></td>
    <td><input type="checkbox" id="checkbox-1-3"></td>
  </tr>
  <tr>
    <td>行2</td>
    <td><input type="checkbox" id="checkbox-2-1"></td>
    <td><input type="checkbox" id="checkbox-2-2"></td>
    <td><input type="checkbox" id="checkbox-2-3"></td>
  </tr>
  <tr>
    <td>行3</td>
    <td><input type="checkbox" id="checkbox-3-1"></td>
    <td><input type="checkbox" id="checkbox-3-2"></td>
    <td><input type="checkbox" id="checkbox-3-3"></td>
  </tr>
</table>

// 获取表格元素
var table = document.querySelector('table');

// 监听表格的点击事件
table.addEventListener('click', function(event) {
  var target = event.target;

  // 检查点击的元素是否为复选框
  if (target.type === 'checkbox') {
    var checkboxId = target.id;
    var checkbox = document.getElementById(checkboxId);

    // 获取行和列的索引
    var rowIndex = checkboxId.split('-')[1];
    var colIndex = checkboxId.split('-')[2];

    // 根据行和列的索引进行相应的操作
    if (rowIndex === '1' && colIndex === '1') {
      // 第一行第一列的复选框被点击
      // 执行相应的操作
    } else if (rowIndex === '2' && colIndex === '2') {
      // 第二行第二列的复选框被点击
      // 执行相应的操作
    } else {
      // 其他情况
      // 执行相应的操作
    }
  }
});