Как сделать разные стили css для первого и второго выбранного элемента checkbox?

Question

[a_dmitrii]

Привет.

Работает такой у меня скрипт, который ограничивает выбор двумя чекбоксами.
Есть необходимость сделать чтоб к примеру выбранный первый элемент имел один стиль, а второй выбранный другой.
Сейчас для всех элемнтов стоит такой стиль:

#product_54 .product-info input[type="checkbox"]:checked + label .img-r{.....

Вот сам скрипт:

<script>
$("#product_54 .form-group #input-option235 input").on("click", function() {

if($("#product_54 .form-group #input-option235 input:checked").length >= 2) { 
// Не больше 2-х checkbox
$("#product_54 .form-group #input-option235 input:not(:checked)").attr("disabled", true);

} else {
$("#product_54 .form-group #input-option235 input:disabled").attr("disabled", false);
}


});
</script>

Может кто еще подскажет как вывести ошибку при попытке выбрать третий элемент или лучше сбросить все выбранные до этого.

Спасибо!

Answer 1

[arsenty]

Непонятно, какую проблему вы пытаетесь решить. В описанном интерфейсе никаких ошибок выводить не нужно. Нужно явно указать ваше ограничение текстом в заголовке группы элементов формы, и disabled (должно быть визуально заметно) для оставшихся, как у вас уже сделано. Опционально к этому, при попытке кликнуть на disabled-элемент можно включать его и отключать предыдущий выбранный.

Comments

[a_dmitrii]

Спасибо за ответ. Все же главный вопрос как сделать чтоб при выборе одной опции назначался один стиль css, а при выборе второй другой css.

[arsenty]

Ок, если вы хотите именно через CSS, то чекбокс нужно вынести наверх, сделав его соседом стоящим перед соответствующим элементом списка и скрыть.

input[type="checkbox"]:checked:nth-child(1) + .product label { color: red }
input[type="checkbox"]:checked:nth-child(2) + .product label { color: blue }