Adding style to parent if checkbox is checked?

Question

I have this 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>

What I need is when icheckbox_minimal-blue class has class checked to add just it parent new class enable It means when the example has to be like this

<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>

See the difference that now class bot have class enable?

Answer 1

If you want the class change handler to be dynamic, you have to create a custom event and bind the handler to that:

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

I'm not going to write the code for you, but to give direction on how you could achieve it:

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

Go forth and write some code.

Answer 3

Unfortunately, this isn't possible using CSS alone, because CSS can only select children and subsequent siblings. Using jQuery, this can be done very simply with the .parent() selector.

You haven't provided enough code in your example to model a working example off of, so I've made my own simple example and you can tweak it to your needs.

$('.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>

---

Since you are using divs rather than standard form controls, you'll need to trigger this in your code that applies the "enable" class. Somewhere in that code, try putting this line (although it's hard to know if this would work without seeing more of your code than what you've shared here).

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