自动打卡/编码场景下Checkbox选中自动禁用功能优化诉求

问题分析 #

你的原代码存在两个核心问题：

• 仅在手动点击Checkbox时触发逻辑，页面加载时已选中的Checkbox不会自动执行禁用操作
• 会禁用所有Checkbox，而非仅未被选中的项

优化实现方案 #

我们可以把禁用逻辑封装成独立函数，既可以在页面加载时自动执行，也能在Checkbox状态变化时触发，同时精准定位未选中的Checkbox进行处理：

$ = jQuery;
$(document).ready(function(){
    // 封装禁用逻辑为可复用函数
    function handleCheckboxDisable() {
        // 判断是否存在已选中的Checkbox
        const hasCheckedItem = $("[type='checkbox']:checked").length > 0;
        // 仅对未选中的Checkbox设置禁用状态和样式
        $("[type='checkbox']:not(:checked)")
            .prop("disabled", hasCheckedItem)
            .css("background", hasCheckedItem ? "rgba(135, 206, 235, 0.4)" : "");
        // 确保已选中的Checkbox始终保持可用
        $("[type='checkbox']:checked").prop("disabled", false);
    }

    // 页面加载完成后立即执行，处理初始已选中的情况
    handleCheckboxDisable();

    // 监听Checkbox状态变化，实时触发禁用逻辑
    $("[type='checkbox']").on('change', handleCheckboxDisable);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 示例Checkbox结构 -->
<input type="checkbox" checked> 选项1
<input type="checkbox"> 选项2
<input type="checkbox"> 选项3

代码说明 #

• 封装可复用函数：将核心禁用逻辑抽离成handleCheckboxDisable，避免重复代码，同时方便多处调用
• 页面加载自动触发：在DOM就绪后直接调用函数，确保页面初始化时就处理已选中的Checkbox
• 精准选择操作对象：使用:not(:checked)选择器仅定位未选中的Checkbox，不会影响已选中的项
• 样式动态重置：当没有Checkbox被选中时，自动重置未选中项的背景样式，恢复初始状态

内容的提问来源于stack exchange，提问作者Robert Jan Sindo