Включить/отключить checkbox при включении нескольких других checkbox

[Aruta]

laimas,

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

не видел, когда вы это писали. Обновилась страница позже уже

[laimas]

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

Добавлять/удалять некий класс блоку floor__item, например active, который и будет раскрашивать, то есть:

.floor__item.active {
    background-color: #A5D8E4;
}

$('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;
        $(e.delegateTarget).find('.floor__item').removeClass('active') 
    }else {
        var c = chk.filter(':checked').length;
        a.eq(0).prop({checked: c, disabled: !c});  
    }
    
    $(this).closest('.floor__item').toggleClass('active')
     
}).find('.floor__item').each(function() {
    $(this).children().wrapAll('<label/>')
});

[laimas]

Кстати, код свернуть/развернуть надо тоже дополнить:

$('div.upsale__block__bot-right__title-wrap').click(function(e) {
        if(e.target.localName!='input') {
            $(this).next()
                   .slideToggle(100)
                   .end()
                   .find('img').toggleClass('arrow_down arrow-up')
                   .end() 
                   .find('.montage__more').hide()
                   .end()
                   .find('.invite').show();
        }
});

Иначе по флажку тоже будет сворачивать.

[Aruta]

.floor__item.active {
    background-color: #A5D8E4;
}

это я пробовал
И тут есть момент - closest() не поддерживается IE даже 10+, и при снятии главной галочки, второстепенные снимаются, а окраска с их блоков нет.
Подключать 2 полифила для closest() не очень хочется, поэтому я и решил переписать с JS на jQuery код, потому что компактней выходит

P.S. окрашивать надо не .floor__item, а .floor__item-wrap

[laimas]

И тут есть момент - closest() не поддерживается IE даже 10+

Используйте новую JQ.

окрашивать надо не .floor__item, а .floor__item-wrap

Проблема, замените на него:

$('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;
        $(e.delegateTarget).find('.floor__item-wrap').removeClass('active') 
    }else {
        var c = chk.filter(':checked').length;
        a.eq(0).prop({checked: c, disabled: !c});  
    }
    
    //$(this).closest('.floor__item-wrap').toggleClass('active')
    //а так для инвалидов
    $(this).parents('.floor__item-wrap').toggleClass('active')   
     
}).find('.floor__item-wrap > div').wrap('<label/>');

[Aruta]

laimas,
Вы мой кумир Спасибо огромное! Это то что надо!

Правда IE всё равно не хочет работать с нажатием на блок, а не на input. Но зато другие работают - этого достаточно.

Тему скрипта можно закрывать, а тему благодарностей laimas открывать

p.s.

Используйте новую JQ.

это IE его не знает - такой он допотопный до сих пор. Ему чтобы понимать closest(), надо полифилы вставлять для matches и closest

[Malleys]

(a.eq(0)[0]==this

Красотища! А говорят, jQuery разработку упрощает!

Aruta, два дня не копался, наверное надо давать понятные имена, а то можно легко запутаться с вашим кодом и всё не понимать, что такое там написано!

Вам такое почему-то запрещено писать? Я имею в виду про то, что вы печатаете много <div>, и ещё обёртки и ещё обёртки...

<details class="upsale_sub_right">
	<summary>
		<input type="checkbox">
		Choose your floor
	</summary>

	<p class="montage_text">intro text</p>
	<div class="floor_items">
		<label>
			<input type="checkbox" name="groundfloor">
			<span class="floor_item_text">Ground floor</span>
		</label>
		<label>
			<input type="checkbox" name="middlefloor">
			<span class="floor_item_text">Second floor</span>
		</label>
		<label>
			<input type="checkbox" name="topfloor">
			<span class="floor_item_text">Third floor</span>
		</label>
		<label>
			<input type="checkbox" name="apartment">
			<span class="floor_item_text">Apartment Building</span>
		</label>
	</div>
</details>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

$(".upsale_sub_right").on("change", function(event) {
	var inputs = $(this).find("input:not(summary input)");
	var parentInput = $(this).find("summary input");

	if(parentInput.is(event.target)) {
		inputs.prop("checked", parentInput.prop("checked"));
	} else {
		var checkedInputs = inputs.filter(":checked");
		parentInput.prop({
			checked: checkedInputs.length !== 0,
			indeterminate:
				checkedInputs.length !== 0 &&
				inputs.length !== checkedInputs.length
		});
	}

	$(this)
		.find(".floor_items > label.active:has(:not(:checked))").removeClass("active")
		.end()
		.find(".floor_items > label:has(:checked)").addClass("active")
	;
});

</script>

<style>

.floor_items > label {
	display: block;
}

.floor_items > .active {
	background-color: #A5D8E4;
}

</style>

[Aruta]

Хотел сделать финальный вариант, чтобы другие сразу могли его увидеть, но он не работает тут как надо - проще файлами прикладывать

[laimas]

это IE его не знает - такой он допотопный до сих пор.

Это разработчики JQ плюнули на старых ишаков, последняя версия которая поддерживает IE8, это 1.8. Сколько можно в старье копаться, вы хотя бы знаете сколько на вашем ресурсе пользователей IE8 и прочего старья?

[Aruta]

laimas,
этот сайт еще даже не запущен Желание заказчика, чтобы работало везде более менее одинаково - вот и кручусь.
Сайт мне достался в том виде, в котором есть сейчас.

Моих доработок там только пара страниц всего, включая backend для них.

Вот теперь могу спокойно приниматься за back для этой страницы.

А по поводу поддержки closest(), я знаю что в JS closest и IE не дружат. И тут я думал тоже такая же зависимость причина-следствие сохраняется

Спасибо за пояснение!