通过Checkbox禁用/启用表格行输入框及页面重载后状态保持

需求概述 #

• 点击表格行内的Checkbox时，禁用该行除Checkbox外的所有input和select控件，再次点击可恢复启用；
• 表单提交后返回页面时，若Checkbox处于勾选状态，对应行的输入控件需保持禁用状态。

完整jQuery代码实现 #

$(document).ready(function() {
    // 页面初始化：处理已勾选的Checkbox对应的行控件
    $('table input[type="checkbox"]:checked').each(function() {
        setRowControlsStatus($(this), true);
    });

    // 绑定Checkbox的变更事件
    $('table').on('change', 'input[type="checkbox"]', function() {
        const isChecked = $(this).is(':checked');
        setRowControlsStatus($(this), isChecked);
    });

    // 统一设置行内控件状态的工具函数
    function setRowControlsStatus(checkbox, shouldDisable) {
        const targetRow = checkbox.closest('tr');
        // 禁用/启用当前行内除触发Checkbox外的所有input和select
        targetRow.find('input, select').not(checkbox).prop('disabled', shouldDisable);
    }
});

代码说明 #

• 初始化逻辑：页面加载完成后，自动遍历所有已勾选的Checkbox，调用工具函数禁用对应行的输入控件，满足表单提交返回后的状态保持需求；
• 事件委托：通过在表格元素上绑定change事件，确保动态添加的表格行也能触发控件状态切换；
• 复用逻辑：封装setRowControlsStatus函数，统一处理控件的禁用/启用操作，减少代码冗余；
• 精准选择器：使用closest('tr')快速定位当前Checkbox所在行，not(checkbox)排除自身，避免误操作触发控件的Checkbox。

内容的提问来源于stack exchange，提问作者stoo frisat