vendredi 3 février 2017

How to check the very next checkbox?

The issue I face is that I have identical "button-checkboxes", but once one of of them is clicked, I only want the closest checkbox check and uncheck.

<span class="button-checkbox">
    <button type="button" class="btn btn-sm btn-default btn-private">
        <i class="fa fa-square-o private"></i>
     <button>
     <input name="private" type="checkbox" class="hidden" />
</span>
<span class="button-checkbox">
    <button type="button" class="btn btn-sm btn-default btn-private">
        <i class="fa fa-square-o private"></i>
     <button>
     <input name="private" type="checkbox" class="hidden" />
</span>

The JavaScript code I currently use is:

$(document).on("click", ".btn-private", function() {

    $(this).find("i").toggleClass('fa-square-o fa-check-square-o');
    $(this).find('input:checkbox').prop("checked", true);

})

For some odd reason, $(this).find("i").toggleClass('fa-square-o fa-check-square-o'); correctly toggles the classes, but it seems that $(this).find('input:checkbox') does not get correctly selected, because if I manually assign an ID and $('#ID').prop("checked", true); it gets correctly checked.

Any ideas on how I can solve this issue and how I can uncheck the box on click as well, would be greatly appreciated!




Aucun commentaire:

Enregistrer un commentaire