15.10.2019, 17:17
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Значит есть ошибки, нужно заглянуть в отладчик, что он вещает.
Собственно ничего сложного нет, нужно удалить ваши обработчики флажков и добавить что я написал, а работа его проста:
//общему родителю флажков делегируется обработка изменения их состояния
//если таких блоков 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
}
});
|
|
15.10.2019, 18:33
|
Аспирант
|
|
Регистрация: 08.07.2019
Сообщений: 85
|
|
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 пункта
|
|
15.10.2019, 18:46
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от 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>
Флажки выбираются только в своих блоках или в обоих не зависимо в каком блоке выбор или же только в своем?
|
|
15.10.2019, 19:17
|
Аспирант
|
|
Регистрация: 08.07.2019
Сообщений: 85
|
|
laimas,
Сообщение от laimas
|
Флажки выбираются только в своих блоках или в обоих не зависимо в каком блоке выбор или же только в своем?
|
флажки выбираются тогда только либо все либо ни один через главный флажок в upsale__block__bot-right__title
|
|
15.10.2019, 19:22
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от Aruta
|
выбираются тогда только либо все либо ни один через главный флажок
|
Не понял, логика выбора не верна или что? Ели не логика, то что в "включает и выключает все блоки разом" считать блоками?
|
|
15.10.2019, 19:25
|
Аспирант
|
|
Регистрация: 08.07.2019
Сообщений: 85
|
|
laimas,
да, не верная.
Выходит что при нажатии на главный чекбокс выбираются все нижние, но при выборе нижнего (если жать именно любой из нижних) не отмечается главный. главный приходится вручную отмечать
Надо чтобы нажал даже если один из нижнихвыбран, то главный тоже имел галку.
А сейчас такого нет.
Но зато работает, что если снять галку с главног, то и с дочек снимается - это хорошо и должно быть
|
|
15.10.2019, 19:30
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от Aruta
|
Выходит что при нажатии на главный чекбокс выбираются все нижние
|
Это верно? Иначе какой смыл в этом флажке.
Сообщение от Aruta
|
но при выборе нижнего (если жать именно любой из нижних) не отмечается главный
|
Где, тут в песочнице? А вот это клевета, либо у вас эксклюзивный браузер.
|
|
15.10.2019, 19:33
|
Аспирант
|
|
Регистрация: 08.07.2019
Сообщений: 85
|
|
laimas,
в хроме смотрю
https://prnt.sc/pjo5hk
|
|
15.10.2019, 19:49
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Здесь, в песочнице, запустите код что я выставил. Верно все? А у вас не так может быть потому, если: а) либо верстка не такая и значит селектор надо изменить, б) либо есть ошибки в коде и надо в отладчике все проверить.
|
|
15.10.2019, 19:56
|
Аспирант
|
|
Регистрация: 08.07.2019
Сообщений: 85
|
|
laimas,
нет ошибок в коде не ругается ни на что
по поводу верстки я специально дал вам ссылку и инструкцию, чтобы посмотреть на живом примере как это работает
|
|
|
|