如何实现表格checkbox单选功能，仅选中行可编辑其余行只读

原有代码的问题 #

• HTML结构错误：<tr>之间插入<br>属于非法用法，会破坏表格结构
• 类名不统一：除第一行外，其余行的checkbox没有添加selectRow类，导致事件无法绑定；所有行的下拉框类名不统一（第一行是col1/col2/col3，其余行是s1/s2/s3），无法批量控制
• 逻辑错误：JS中直接判断jQuery对象checkedRow会永远返回true，且修改disabled状态时操作了全局所有下拉框，没有对应到选中行，单选互斥逻辑也错误

修正后完整代码 #

HTML代码 #

<table class="tbl">
  <tr>
    <td><input type="checkbox" name="check1" class="selectRow" />&nbsp;</td>
    <td>
      <select class="col1">
        <option id="col1o1">A</option>
        <option id="col1o2">B</option>
        <option id="col1o3">C</option>
        <option id="col1o4">E</option>
      </select>
    </td>
    <td>
      <select class="col2">
        <option id="col2o1">A</option>
        <option id="col2o2">B</option>
        <option id="col2o3">C</option>
        <option id="col2o4">E</option>
      </select>
    </td>
    <td>
      <select class="col3">
        <option id="col3o1">A</option>
        <option id="col3o2">B</option>
        <option id="col3o3">C</option>
        <option id="col3o4">E</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox" name="check1" class="selectRow" />&nbsp;</td>
    <td>
      <select class="col1">
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>E</option>
      </select>
    </td>
    <td>
      <select class="col2">
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>E</option>
      </select>
    </td>
    <td>
      <select class="col3">
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>E</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox" name="check1" class="selectRow" />&nbsp;</td>
    <td>
      <select class="col1">
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>E</option>
      </select>
    </td>
    <td>
      <select class="col2">
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>E</option>
      </select>
    </td>
    <td>
      <select class="col3">
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>E</option>
      </select>
    </td>
  </tr>
</table>

JS代码 #

$(document).ready(function(){
  // 初始化所有下拉框为只读状态
  $('.col1, .col2, .col3').attr('disabled', true);

  // 绑定checkbox变更事件
  $('.tbl').on('change', '.selectRow', function() {
    const isChecked = $(this).is(':checked');
    const currentRow = $(this).closest('tr');
    
    // 取消所有其他checkbox的选中，所有下拉框设为只读
    $('.selectRow').not(this).prop('checked', false);
    $('.col1, .col2, .col3').attr('disabled', true);

    // 若当前checkbox选中，开放当前行的下拉框编辑权限
    if (isChecked) {
      currentRow.find('.col1, .col2, .col3').removeAttr('disabled');
    }
  });
});

内容的提问来源于stack exchange，提问作者M.Gooda