Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Включить/отключить checkbox при включении нескольких других checkbox (https://javascript.ru/forum/misc/78653-vklyuchit-otklyuchit-checkbox-pri-vklyuchenii-neskolkikh-drugikh-checkbox.html)

laimas 15.10.2019 17:17

Значит есть ошибки, нужно заглянуть в отладчик, что он вещает.
Собственно ничего сложного нет, нужно удалить ваши обработчики флажков и добавить что я написал, а работа его проста:

//общему родителю флажков делегируется обработка изменения их состояния
//если таких блоков upsale__block__sub-right-wrap много, то этот обработчик будет выполнятся только в контексте текущего
$('div.upsale__block__sub-right-wrap').on('change', 'input', function(e) { 
    var chk = $(e.delegateTarget).find('input'); //получили все флажки текущего родителя
    //если источник события это флажок block__check, что можно проверить и так: $(this).hasClass('block__check')
    if(chk.eq(0)[0]==this) chk.slice(1).prop('checked', this.checked); //то определить его состояние всем последующим флажкам текущего родителя  
    else { //иначе это изменение флажков набора
        var c = chk.slice(1).filter(':checked').length; //есть ли выбранные флажки в наборе?
        chk.eq(0).prop({checked: c, disabled: !c}); //результат операции присвоить свойствам checked и disabled флажка block__check    
    }
});

Aruta 15.10.2019 18:33

laimas,


Если я отключаю свои обработчики, тогда ваш код включает и выключает все блоки разом, а задача другая:
Цитата:

Нужно чтобы:
- чекбокс id="floor" получал галочку, когда хотя бы один из один из дочерних чекбоксов в <div class="floor__item"> имеет галочку и наоборот, если галочки снять со всех дочерних чекбоксов <div class="floor__item">, то и на id="floor" галочка убиралась (но она должна быть пока имеется хоть один включенный флаг).
- если с id="floor" снять галочку, то и со всех дочерних чекбоксов <div class="floor__item"> тоже снималась.
- если ни на одном дочернем чекбоксе <div class="floor__item"> нет, то id="floor" не кликабелен.

Чего не хватает в вашем коде, так это 1 пункта и 3 пункта:)

laimas 15.10.2019 18:46

Цитата:

Сообщение от Aruta
Если я отключаю свои обработчики, тогда ваш код включает и выключает все блоки разом

Да ну? Если все сверстано так как я писал (<h3>Block 1</h3> это для примера тут), то:

<div class="upsale__block__sub-right-wrap"> <h3>Block 1</h3>
    <div class="upsale__block__bot-right__title-wrap dflex">
        <div class="upsale__block__bot-right__title dflex">
            <input id="floor" type="checkbox" class="block__check" disabled="" />                            
        </div>                           
    </div>
    <div class="upsale__block__bot-right__sub-wrap dnone">
        <div class="montage__content-wrap">
            <span class="montage__text">intro text where we explain </span>
            <div class="montage__floor-wrap montage__comp-wrap dflex">
                <div class="montage__floor dflex">
                    <div class="floor__item-wrap">
                        <div class="floor__item-inner">
                            <div class="floor__item">
                                <input type="checkbox" name="groundfloor" value="groundfloor">
                                <div class="floor__item__img">
                                    <img src="catalog/view/theme/myown/image/floor/groundFloor.svg" alt="">
                                </div>
                                <span class="floor__item__text">floor__item__text 0</span>
                            </div>
                            <div class="floor__item">
                                <input type="checkbox" name="groundfloor" value="groundfloor">
                                <div class="floor__item__img">
                                    <img src="catalog/view/theme/myown/image/floor/groundFloor.svg" alt="">
                                </div>
                                <span class="floor__item__text">floor__item__text 1</span>
                            </div>
                        </div>
                    </div>                                       
                </div>
            </div>
        </div>           
    </div>           
</div>

<div class="upsale__block__sub-right-wrap"> <h3>Block 2</h3>
    <div class="upsale__block__bot-right__title-wrap dflex">
        <div class="upsale__block__bot-right__title dflex">
            <input id="floor" type="checkbox" class="block__check" disabled="" />                            
        </div>                           
    </div>
    <div class="upsale__block__bot-right__sub-wrap dnone">
        <div class="montage__content-wrap">
            <span class="montage__text">intro text where we explain </span>
            <div class="montage__floor-wrap montage__comp-wrap dflex">
                <div class="montage__floor dflex">
                    <div class="floor__item-wrap">
                        <div class="floor__item-inner">
                            <div class="floor__item">
                                <input type="checkbox" name="groundfloor" value="groundfloor">
                                <div class="floor__item__img">
                                    <img src="catalog/view/theme/myown/image/floor/groundFloor.svg" alt="">
                                </div>
                                <span class="floor__item__text">floor__item__text 0</span>
                            </div>
                            <div class="floor__item">
                                <input type="checkbox" name="groundfloor" value="groundfloor">
                                <div class="floor__item__img">
                                    <img src="catalog/view/theme/myown/image/floor/groundFloor.svg" alt="">
                                </div>
                                <span class="floor__item__text">floor__item__text 1</span>
                            </div>
                        </div>
                    </div>                                       
                </div>
            </div>
        </div>           
    </div>           
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('div.upsale__block__sub-right-wrap').on('change', 'input', function(e) {
    var chk = $(e.delegateTarget).find('input'),
        set = chk.slice(1);
    if(chk.eq(0)[0]==this) set.prop('checked', this.checked); 
    else { 
        var c = set.filter(':checked').length;
        chk.eq(0).prop({checked: c, disabled: !c});  
    }
})
</script>


Флажки выбираются только в своих блоках или в обоих не зависимо в каком блоке выбор или же только в своем?

Aruta 15.10.2019 19:17

laimas,
Цитата:

Сообщение от laimas
Флажки выбираются только в своих блоках или в обоих не зависимо в каком блоке выбор или же только в своем?

флажки выбираются тогда только либо все либо ни один через главный флажок в upsale__block__bot-right__title

laimas 15.10.2019 19:22

Цитата:

Сообщение от Aruta
выбираются тогда только либо все либо ни один через главный флажок

Не понял, логика выбора не верна или что? Ели не логика, то что в "включает и выключает все блоки разом" считать блоками?

Aruta 15.10.2019 19:25

laimas,
да, не верная.

Выходит что при нажатии на главный чекбокс выбираются все нижние, но при выборе нижнего (если жать именно любой из нижних) не отмечается главный. главный приходится вручную отмечать

Надо чтобы нажал даже если один из нижнихвыбран, то главный тоже имел галку.
А сейчас такого нет.
Но зато работает, что если снять галку с главног, то и с дочек снимается - это хорошо и должно быть

laimas 15.10.2019 19:30

Цитата:

Сообщение от Aruta
Выходит что при нажатии на главный чекбокс выбираются все нижние

Это верно? Иначе какой смыл в этом флажке.

Цитата:

Сообщение от Aruta
но при выборе нижнего (если жать именно любой из нижних) не отмечается главный

Где, тут в песочнице? А вот это клевета, либо у вас эксклюзивный браузер. ;)

Aruta 15.10.2019 19:33

laimas,
в хроме смотрю:(
https://prnt.sc/pjo5hk

laimas 15.10.2019 19:49

Здесь, в песочнице, запустите код что я выставил. Верно все? А у вас не так может быть потому, если: а) либо верстка не такая и значит селектор надо изменить, б) либо есть ошибки в коде и надо в отладчике все проверить.

Aruta 15.10.2019 19:56

laimas,
нет ошибок в коде:( не ругается ни на что

по поводу верстки я специально дал вам ссылку и инструкцию, чтобы посмотреть на живом примере как это работает


Часовой пояс GMT +3, время: 09:17.