如何将两组复选框互斥禁用的双jQuery事件处理函数合并为单个？

你可以通过统一绑定事件、利用父容器判断分组的方式，把两个独立的事件处理函数合并成一个，代码更简洁且逻辑统一：

$(document).ready(function(){
    // 给两个分组内的所有checkbox绑定同一个change事件
    $('#div1 input[type="checkbox"], #div2 input[type="checkbox"]').on('change', function(){
        // 获取当前checkbox所属的分组容器
        var currentGroup = $(this).closest('div');
        // 确定要操作的目标分组ID
        var targetGroupId = currentGroup.attr('id') === 'div1' ? 'div2' : 'div1';
        // 检查当前分组是否有选中的checkbox
        var hasCheckedItem = currentGroup.find('input[type="checkbox"]:checked').length > 0;
        // 对目标分组的checkbox设置禁用状态
        $('#' + targetGroupId + ' input[type="checkbox"]').prop('disabled', hasCheckedItem);
    });
});

代码逻辑说明： #

• 一次性选中div1和div2内的所有复选框，绑定同一个change事件处理函数，避免重复代码。
• 当任意复选框状态变化时，通过closest('div')找到它所属的分组容器，无需依赖.sev或.orp类名，逻辑更健壮。
• 根据当前分组的ID，自动判断要禁用/启用的目标分组。
• 检查当前分组是否有已选中的复选框，以此决定目标分组的禁用状态：如果当前组有选中项，就禁用另一组；反之则启用。

如果更倾向于沿用原有的类名区分分组，也可以用下面的写法：

$(document).ready(function(){
    // 绑定.sev和.orp类的checkbox的change事件
    $('.sev, .orp').on('change', function(){
        // 判断当前checkbox属于哪个分组
        var isSevGroup = $(this).hasClass('sev');
        // 确定目标分组和当前分组的选择器
        var targetSelector = isSevGroup ? '#div2 input' : '#div1 input';
        var currentGroupSelector = isSevGroup ? '.sev' : '.orp';
        // 检查当前分组是否有选中项
        var hasChecked = $(currentGroupSelector + ':checked').length > 0;
        // 设置目标分组的禁用状态
        $(targetSelector).prop('disabled', hasChecked);
    });
});

两种写法都能实现需求，第一种不依赖类名，更适配后续可能的结构调整；第二种则沿用你原有的类名逻辑，改动更小。

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