How can I select a checkbox in a sibling div using JQuery selectors?

Question

Using JQuery selectors, how can I select the checkbox contained in the sibling div and remove the disabled property? (in the example code below, I need the checkbox in the div with the class of col-3 ) I can't just put a class on the checkbox and use that because I have multiple occurrences where I have this same structure, so I need to do it dynamically based on the HTML layout. I have tried a combination of selectors including next() , closest() and siblings() but I can't seem to target the checkbox successfully.

My HTML structure looks like this:

<div class = "col-6">
    <label>
        <input type="checkbox" />
    </label>
</div>

<div class = "col-3">
    <label>
        <input type="checkbox" disabled="disabled" />
    </label>
</div>

Answer 1

To get the containing div, use $(this).closest("div") . To get its siblings, call .siblings() . Then use .find() to find the checkboxes that they contain.

 $(":checkbox").click(function() { $(this).closest("div").siblings().find(":checkbox").removeAttr("disabled"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-6"> <label> <input type="checkbox" /> </label> </div> <div class="col-3"> <label> <input type="checkbox" disabled="disabled" /> </label> </div>