Добавление стиля к родительскому, если флажок установлен?

Question

У меня есть этот HTML

<div class="bot"> 
    <span class="k-checkbox" role="presentation"> 
     <div class="icheckbox_minimal-blue checked"> 
     </div> 
    </span> 
</div> 
<div class="bot"> 
    <span class="k-checkbox" role="presentation"> 
     <div class="icheckbox_minimal-blue"> 
     </div> 
    </span> 
</div> 

Что мне нужно, это когда icheckbox_minimal-синий класс имеет класс проверил добавить только что родительский новый класс включить Это означает, что, когда пример должен быть, как этот

<div class="bot enable"> 
    <span class="k-checkbox" role="presentation"> 
     <div class="icheckbox_minimal-blue checked"> 
     </div> 
    </span> 
</div> 
<div class="bot"> 
    <span class="k-checkbox" role="presentation"> 
     <div class="icheckbox_minimal-blue"> 
     </div> 
    </span> 
</div> 

Посмотрите, что теперь у класса бот есть возможность включения класса?

Answer 1

Если вы хотите, чтобы обработчик изменения класса должен быть динамичным, вы должны создать пользовательское событие и привязать обработчик, что:

for (i = 0; i < checkBoxArray.length; i++) { 
    var checkBoxItem = document.getElementsByClassName("icheck_minimal-blue")[i]; 
    $(checkBoxItem).on('click', function() { 
     $(checkBoxItem).toggleClass("checked").trigger("classChanged"); 
    }); 

    $(checkBoxItem).on('classChanged', function() { 
     $(checkBoxItem).parents().eq(1).toggleClass("enable"); 
    }); 
} 

Answer 2

Я не собираюсь писать код для вас, но дать направление на том, как вы могли бы достичь его:

1. Loop through the checkboxes
2. Check if it's been checked, or had the required class
3. Find the parent
4. Add the class

выйди и написать код.

Answer 3

К сожалению, это невозможно с использованием только CSS, поскольку CSS может выбирать только детей и последующих братьев и сестер. Используя jQuery, это можно сделать очень просто с помощью селектора .parent().

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

$('.checkbox').change(function() { 
 
    $(this).parent().toggleClass("enable"); 
 
});

.enable { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="checkbox" class="checkbox"> 
 
</div>

---

Поскольку вы используете дивы, а не стандартные элементы формы, вам нужно, чтобы вызвать это в вашем коде, который применяет класс «включить». Где-то в этом коде попробуйте поставить эту строку (хотя трудно понять, будет ли это работать, не видя больше вашего кода, чем то, что вы здесь поделили).

$(this).parent().toggleClass("enable");