Laravel项目嵌套复选框JS代码修改：移除父选全选子项功能

I’ll help you tweak your JavaScript code to keep the "check parent when child is checked" functionality while removing the "check all children when parent is checked" behavior. Here’s the adjusted code and a breakdown of the changes:

Modified Code #

$(function() {
    $('input[type="checkbox"]').change(checkboxChanged);

    function checkboxChanged() {
        var $this = $(this),
            checked = $this.prop("checked"),
            container = $this.parent(),
            siblings = container.siblings();

        // Update only the clicked checkbox's label state (removed bulk child selection)
        $this.siblings('label')
             .removeClass('custom-checked custom-unchecked custom-indeterminate')
             .addClass(checked ? 'custom-checked' : 'custom-unchecked');

        // Keep the logic to update parent checkbox states based on child selection
        checkSiblings(container, checked);
    }

    function checkSiblings($el, checked) {
        var parent = $el.parent().parent(),
            all = true,
            indeterminate = false;

        $el.siblings().each(function() {
            return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
        });

        if (all && checked) {
            parent.children('input[type="checkbox"]')
                 .prop({ indeterminate: false, checked: checked })
                 .siblings('label')
                 .removeClass('custom-checked custom-unchecked custom-indeterminate')
                 .addClass(checked ? 'custom-checked' : 'custom-unchecked');
            checkSiblings(parent, checked);
        } else if (all && !checked) {
            indeterminate = parent.find('input[type="checkbox"]:checked').length > 0;
            parent.children('input[type="checkbox"]')
                 .prop("checked", checked)
                 .prop("indeterminate", indeterminate)
                 .siblings('label')
                 .removeClass('custom-checked custom-unchecked custom-indeterminate')
                 .addClass(indeterminate ? 'custom-indeterminate' : (checked ? 'custom-checked' : 'custom-unchecked'));
            checkSiblings(parent, checked);
        } else {
            $el.parents("li").children('input[type="checkbox"]')
                 .prop({ indeterminate: true, checked: false })
                 .siblings('label')
                 .removeClass('custom-checked custom-unchecked custom-indeterminate')
                 .addClass('custom-indeterminate');
        }
    }
});

Key Changes Explained #

• Removed parent-to-child bulk selection: The original code used container.find('input[type="checkbox"]') to check/uncheck all child boxes whenever any checkbox (including parents) was toggled. We’ve deleted this block entirely—now clicking a parent checkbox only affects its own state, not its children.
• Retained child-to-parent state sync: The checkSiblings function stays intact, so checking/unchecking a child will still update its parent’s state:
  • Parent gets checked if all children are checked
  • Parent switches to indeterminate if some children are checked
  • Parent gets unchecked if no children are checked
• Targeted label updates: We now update the label class directly on the clicked checkbox instead of all boxes in the container, which matches the new, more focused behavior.

This adjustment gives you exactly what you requested: child checkboxes influence their parent’s state, but parent checkboxes no longer control their children.

内容的提问来源于stack exchange，提问作者Omneya el-meligy