如何使用jQuery在Django表单中达到勾选上限时动态禁用未选中复选框

你可以直接使用如下JS代码实现需求，可自行调整代码中MAX_SELECT常量修改勾选上限：

// 定义最大可勾选数量，可按需修改
const MAX_SELECT = 2;

function updateCheckboxStatus() {
    // 统计当前已勾选的复选框数量
    const checkedCount = $('form input[type="checkbox"]:checked').length;
    if (checkedCount >= MAX_SELECT) {
        // 达到上限时仅禁用未选中的复选框
        $('form input[type="checkbox"]:not(:checked)').prop('disabled', true);
    } else {
        // 未达上限时恢复所有复选框可点击状态
        $('form input[type="checkbox"]').prop('disabled', false);
    }
}

$(document).ready(function() {
    // 页面加载完成后先执行一次，适配后端默认勾选的场景
    updateCheckboxStatus();
    // 绑定复选框点击事件
    $(document).on('click', 'form input[type="checkbox"]', function() {
        updateCheckboxStatus();
    });
});

逻辑说明 #

• 选择器限定为form内的复选框，完全适配Django form.as_p的渲染结构，无需修改原有表单模板代码
• 使用prop方法修改disabled布尔属性，避免attr方法可能出现的状态同步问题
• 页面加载时自动执行一次状态校验，覆盖后端默认勾选值刚好达到上限的场景

实现效果参考：

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