如何限制复选框选中数量并让脚本仅对第一个div生效？

我明白你的需求了——你想让复选框数量限制只在第一个div1内生效，当选中数量达到2个时，只禁用div1里未选中的复选框，其他Div的复选框不受影响。咱们来修改你的脚本，解决这个问题：

修改后的完整代码 #

(function() { 
    "use strict"; 
    var limitChoices = 2; // 限制选中数量
    // 统计目标Div内已选中的复选框数量
    var countChecked = function($checks) {
        let count = 0;
        loop($checks, function($element) {
            if ($element.checked) count++;
        });
        return count;
    };
    var verifyCheckeds = function($checks) { 
        const marcados = countChecked($checks);
        if (marcados >= limitChoices && limitChoices != 0) { 
            loop($checks, function($element) { 
                // 只禁用未选中的复选框
                $element.disabled = !$element.checked; 
            }); 
        } else { 
            loop($checks, function($element) { 
                $element.disabled = false; 
            }); 
        } 
    }; 
    var loop = function($elements, cb) { 
        var max = $elements.length; 
        while (max--) { 
            cb($elements[max]); 
        } 
    } 
    window.onload = function() { 
        // 获取目标div（第一个div，class为div1）
        const targetDiv = document.querySelector(".div1"); 
        // 只获取目标div内的复选框
        var $checks = targetDiv.querySelectorAll('input[type="checkbox"]'); 
        loop($checks, function($element) { 
            $element.onclick = function() { 
                verifyCheckeds($checks); 
            };
        }); 
        // 页面加载时先执行一次校验
        verifyCheckeds($checks); 
    } 
}()); 

<div class="div1"> 
    <span>Div 1</span> 
    <div> 
        <input type="checkbox" /><span>Test</span> 
    </div> 
    <div> 
        <input type="checkbox" /><span>Test</span> 
    </div> 
    <div> 
        <input type="checkbox" /><span>Test</span> 
    </div> 
</div> 
<div class="div2"> 
    <span>Div 2</span> 
    <div> 
        <input type="checkbox" /><span>Test</span> 
    </div> 
    <div> 
        <input type="checkbox" /><span>Test</span> 
    </div> 
    <div> 
        <input type="checkbox" /><span>Test</span> 
    </div> 
</div> 
<div class="div3"> 
    <span>Div 3</span> 
    <div> 
        <input type="checkbox" /><span>Test</span> 
    </div> 
    <div> 
        <input type="checkbox" /><span>Test</span> 
    </div> 
    <div> 
        <input type="checkbox" /><span>Test</span> 
    </div> 
</div>

关键改动说明 #

• 缩小作用范围：不再获取页面所有复选框，而是先定位到div1，再获取它内部的复选框元素，确保脚本只对目标Div生效。
• 优化计数逻辑：新增countChecked函数，专门统计目标Div内已选中的复选框数量，避免全局变量计数出错的问题。
• 修正禁用规则：把原代码中模糊的禁用判断改为$element.disabled = !$element.checked;，明确只禁用未选中的复选框，已选中的仍可取消选择。
• 清理冗余代码：移除了原代码中定义但未使用的elementodiv变量，简化代码结构。

这样修改后，当你在div1里选中2个复选框时，只会禁用div1内剩余的未选中复选框，div2和div3的复选框完全不受影响，完美符合你的需求。

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