Если один чекбокс не активен то родительский становится тоже неактивным

Question

var chChildrens;
    
    $(".main_checkbox input").on("change", function() {
        parentBlock = $(this).closest(".checkboxes_array");
        chChildrens = parentBlock.find(".ch_childrens input");
        if($(this).is(":checked")) {
            chChildrens.prop("checked", true);
        } else {
            chChildrens.prop("checked", false);
        }
    });
    
    $(".ch_childrens input").on("change", function() {
        parentBlock = $(this).closest(".checkboxes_array");
        chChildrens = parentBlock.find(".ch_childrens input");
        mainCheckbox = parentBlock.find(".main_checkbox input");
        chChildrens.each(function() {
            if(!$(this).is(":checked")) {
                mainCheckbox.prop("checked", false);
                return true;
            } else {
                mainCheckbox.prop("checked", true);
            }
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkboxes_array">
        <div class="main_checkbox_wrapp">
            <div class="checkbox main_checkbox">
                <input type="checkbox" name="filter_ch" id="ch_18_3">
                <label for="ch_18_3" data-filter="filters_2">Червона лінія</label>
            </div>
        </div>
        <div class="checkboxes_col ch_childrens">
            <div>
                <div class="checkbox">
                    <input type="checkbox" name="filter_ch" id="ch_1_1">
                    <label for="ch_1_1" data-filter="filters_2">Академмістечко</label>
                </div>
            </div>
            <div>
                <div class="checkbox">
                    <input type="checkbox" name="filter_ch" id="ch_1_2">
                    <label for="ch_1_2" data-filter="filters_2">Житомирська</label>
                </div>
            </div>
         </div>
    </div>

Если чекбокс "Червона лінія" активен, то все чекбоксы в .checkboxes_col.ch_childrens тоже должны быть активны. Но если хоть один чекбокс в .checkboxes_col.ch_childrens не активен то и чекбокс "Червона лінія" тоже не должен быть активен. Как это сделать?

Answer 1

Чтобы остановить цикл each коллбэк должен возвращать false, а не true

var chChildrens;
    
    $(".main_checkbox input").on("change", function() {
        parentBlock = $(this).closest(".checkboxes_array");
        chChildrens = parentBlock.find(".ch_childrens input");
        if($(this).is(":checked")) {
            chChildrens.prop("checked", true);
        } else {
            chChildrens.prop("checked", false);
        }
    });
    
    $(".ch_childrens input").on("change", function() {
        parentBlock = $(this).closest(".checkboxes_array");
        chChildrens = parentBlock.find(".ch_childrens input");
        mainCheckbox = parentBlock.find(".main_checkbox input");
        chChildrens.each(function() {
            if(!$(this).is(":checked")) {
                mainCheckbox.prop("checked", false);
                return false;
            } else {
                mainCheckbox.prop("checked", true);
            }
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkboxes_array">
        <div class="main_checkbox_wrapp">
            <div class="checkbox main_checkbox">
                <input type="checkbox" name="filter_ch" id="ch_18_3">
                <label for="ch_18_3" data-filter="filters_2">Червона лінія</label>
            </div>
        </div>
        <div class="checkboxes_col ch_childrens">
            <div>
                <div class="checkbox">
                    <input type="checkbox" name="filter_ch" id="ch_1_1">
                    <label for="ch_1_1" data-filter="filters_2">Академмістечко</label>
                </div>
            </div>
            <div>
                <div class="checkbox">
                    <input type="checkbox" name="filter_ch" id="ch_1_2">
                    <label for="ch_1_2" data-filter="filters_2">Житомирська</label>
                </div>
            </div>
         </div>
    </div>

БЛОГ НА HUSL

Если один чекбокс не активен то родительский становится тоже неактивным

Ответы (1 шт):