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)

Aruta 16.10.2019 19:24

laimas,
первый блок не смотрите. Надо на примере второго только создать скрипт.
первый блок законченный уже. он такой один будет и его скрипты отдельные. Кроме скрипта show/hide для показа дочернего .upsale__block__bot-right__sub-wrap. Но и тот работает по принципу this.children()

laimas 16.10.2019 20:40

Цитата:

Сообщение от Aruta
Надо на примере второго только создать скрипт.

Думать надо головой, а не пятой точкой. ;) Поле типа file также имеет событие change, а делегирование по имени класса блоков. Что при этом произойдет при выборе файла в первом блоке?

Код этого обработчика $('.upsale__block__sub-right-wrap').on('click', '.upsale__block__bot-right__title-wrap', function() ... заменить на:
$('div.upsale__block__bot-right__title-wrap').click(function() {
        
        $(this).next()
               .slideToggle(100)
               .end()
               .find('img').toggleClass('arrow_down arrow-up')
               .end() 
               .find('.montage__more').hide()
               .end()
               .find('.invite').show();
        
                           
});

Здесь делегирование совсем не требуется. Правда зачем в нем строки:

$(this).siblings('.upsale__block__bot-right__sub-wrap').find('.montage__more').hide();
$(this).siblings('.upsale__block__bot-right__sub-wrap').find('.invite').show();

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

Он устанавливается на блоки кроме первого.

Aruta 17.10.2019 05:10

Вложений: 1
laimas,
Цитата:

Сообщение от laimas
Здесь делегирование совсем не требуется. Правда зачем в нем строки:

$(this).siblings('.upsale__block__bot-right__sub-wrap').find('.montage__more').hide();
$(this).siblings('.upsale__block__bot-right__sub-wrap').find('.invite').show();

это для первого блока, там есть 2 кнопки:

- при нажатии на .btn_more (желтая кнопка) скрывается кнопка (синяя) .invite и открывается появляется блок .montage__more. Когда повторно нажимаем на .btn_more, то montage__more скрывается, а кнокпа .invite (синяя) появляется на том месте где была скрыта. Причем кнопка .invite дублируется в блоке .montage__more, когда тот открывается, НО она не участвует в срипте show/hide (и не должна).

- если развернут блок .montage__more, то при нажатии на .upsale__block__bot-right__title-wrap этот блок должен свернуться и кнопка .invite должна стать show(), чтобы при последующем открытии она была доступна пользователю, т.к. если этого не сделать, то она не появится.

на картинках всё показал. Надеюсь понятно объясняю, а не только для меня мои мысли понятны:)

Но опять же это не решает проблему нажатия на .floor__item-wrap, чтобы сработал его дочерний чекбокс

laimas 17.10.2019 05:54

Цитата:

Сообщение от Aruta
Надеюсь понятно объясняю

Для меня нет. Родительский блок показывается/скрывается, в нем же '.montage__more' и '.invite', которым при любом состоянии родителя предписано одному всегда скрываться, другому показаться.

Цитата:

Сообщение от Aruta
Но опять же это не решает проблему нажатия на .floor__item-wrap, чтобы сработал его дочерний чекбокс

Вообще не понять что это и о чем.

Malleys 17.10.2019 06:24

Цитата:

Сообщение от Aruta
Но опять же это не решает проблему нажатия на .floor__item-wrap, чтобы сработал его дочерний чекбокс

Так замените <div> на <label>

Aruta 17.10.2019 07:01

Цитата:

Сообщение от Malleys
Так замените <div> на <label>

Malleys,
наверное так и сделаю. А то 2 дня уже страдаем, а до этого еще я сам 2 потратил.

laimas,
Спасибо за Ваше терпение и помощь!
Жаль нельзя плюсиков больше поставить - я вам вчера уже один поставил:)

laimas 17.10.2019 07:26

Цитата:

Сообщение от Aruta
наверное так и сделаю

Ранее надо было тогда вести речь о выборе не только по флажку, но и по родителю. Заменять div не обязательно, можно просто обернуть его дочерние элементы label. Если это затруднительно сделать, то можно это сделать программно при загрузке страницы, для этого добавить в цепочку установки обработчика флажков такую операцию, чтобы выглядело так:

$('div.upsale__block__sub-right-wrap').slice(1).on('change', 'input', function(e) { 

    var chk = $(e.delegateTarget).find('input');
    
    if(chk.eq(0)[0]==this) {
        chk.slice(1).prop('checked', false);
        this.disabled = true;  
    }else {
        var c = chk.slice(1).filter(':checked').length;
        chk.eq(0).prop({checked: c, disabled: !c});   
    }
    
}).find('.floor__item').each(function() {
    $(this).children().wrapAll('<label/>')
});

Aruta 17.10.2019 07:30

Заменил div на label и теперь новая задача возникает:

Раньше, когда галка ставилась для второстепенного input, то родительскому блоку добавлялся background цветом, а галка снималась - background белым делался.

Как теперь это добавить в тот код, что имеется?:)

$('div.upsale__block__sub-right-wrap').slice(1).on('change', 'input', function(e) { 
	
    var a = $(e.delegateTarget).find('input'), chk = a.slice(1);
    
    if(a.eq(0)[0]==this) {
        chk.prop('checked', false);
        this.disabled = true;  
    }else {
        var c = chk.filter(':checked').length;
        a.eq(0).prop({checked: c, disabled: !c});   
    }
    
});

laimas 17.10.2019 07:37

Цитата:

Сообщение от Aruta
Заменил div на label и теперь новая задача возникае

А выше посмотреть? Зачем менять div на label?

Aruta 17.10.2019 07:41

Цитата:

Сообщение от laimas
Ранее надо было тогда вести речь о выборе не только по флажку, но и по родителю

Я это писал:)

А вот про цвет не писал - думал сам справлюсь, но не понимаю как связать это с вашим кодом - не работает то, что я пробую.


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