CSS is not recognising checked attribute of checkbox when changing from jQuery

Question

There is an issue with CSS and property :checked for checkbox when changing in jQuery. When I use ('#checkbox').on('change') function, CSS is properly displaying element style

however when I use ('#checkbox').on('click') and then changing 'checked' in jQuery, CSS seems to ignore this setting.

It looks like CSS is applied to page after event is fired, and before jQuery is completed. I also tried to trigger "change" event manually, but without any success.

Is there any way to toggle checkbox 'on click' and make sure that correct CSS is applied?

TO see this issue, visit jsfiddle and click first and then second checkbox

https://jsfiddle.net/porzechowski/9yoqd736/

jQuery

$(document).ready(function () {

    /**
     /* for first checkox we can see changed color, after checkox status is changed
     /* for second checkbox attribute checked and prop is changed, but CSS is not recognizing it
     **/

    // this is code for checkbox 1 - working

    $('body').on('change', '#checkbox1', function (e) {
        e.preventDefault();
        if ($(this).attr('checked')) {
            console.log("checkbox1 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked'));
            return;
        }
        console.log("checkbox1 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked'));
    });

    // this is code for checkbox 2 - css not working
    $('body').on('click', '#checkbox2', function (e) {
        e.preventDefault();
        if ($(this).attr('checked')) {
            $(this).removeAttr('checked');
            $(this).prop("checked", false);
            console.log("checkbox2 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked'));
            return;
        }
        $(this).attr('checked', 'checked');
        $(this).prop("checked", true)
        console.log("checkbox2 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked'));
    });

});

CSS

.add-to-favorites-checkbox[type="checkbox"] + .add-to-favorites-checkbox-icon span {
width: 16px;
height: 16px;
background-color: red;
display: block;
}

.add-to-favorites-checkbox[type="checkbox"]:checked + .add-to-favorites-checkbox-icon span {
background-color: green;
display: block;
}

input {
display: none;
}

HTML

<span class="add-to-bookmark add-btn">
<input class="add-to-favorites-checkbox js_bookmark-check" type="checkbox" id="checkbox1" value="1" name="checkbox-favorites">
<label class="add-to-favorites-checkbox-icon" for="checkbox1"><span></span> Add to fav 1 </label>
</span>

<span class="add-to-bookmark add-btn">
<input class="add-to-favorites-checkbox js_bookmark-check" type="checkbox" id="checkbox2" value="2" name="checkbox-favorites">
<label class="add-to-favorites-checkbox-icon" for="checkbox2"><span></span> Add to fav 2 </label>
</span>

score 1 · Answer 1 · edited May 23 '17 at 12:02

Use change in $('body').on('click','#checkbox2', function() { and also

check this post, prop vs attr

$(document).ready(function () {

        /**
         /* for first checkox we can see changed color, after checkox status is changed
         /* for second checkbox attribute checked and prop is changed, but CSS is not recognizing it
         **/

        // this is code for checkbox 1 - working

        $('body').on('change', '#checkbox1', function (e) {
            e.preventDefault();
            if ($(this).attr('checked')) {
                console.log("checkbox1 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked'));
                return;
            }
            console.log("checkbox1 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked'));
        });

        // this is code for checkbox 2 - css not working
        $('body').on('change', '#checkbox2', function (e) {
            e.preventDefault();
            if ($(this).attr('checked')) {
                $(this).removeAttr('checked');
                $(this).prop("checked", false);
                console.log("checkbox2 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked'));
                return;
            }
            $(this).attr('checked', 'checked');
            $(this).prop("checked", true)
            console.log("checkbox2 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked'));
        });

    });

.add-to-favorites-checkbox[type="checkbox"] + .add-to-favorites-checkbox-icon span {
        width: 16px;
        height: 16px;
        background-color: red;
        display: block;
    }

    .add-to-favorites-checkbox[type="checkbox"]:checked + .add-to-favorites-checkbox-icon span {
        background-color: green;
        display: block;
    }

    input {
        display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="add-to-bookmark add-btn">
<input class="add-to-favorites-checkbox js_bookmark-check" type="checkbox" id="checkbox1" value="1"
       name="checkbox-favorites">
<label class="add-to-favorites-checkbox-icon" for="checkbox1"><span></span> Add to fav 1 </label>
</span>

<span class="add-to-bookmark add-btn">
<input class="add-to-favorites-checkbox js_bookmark-check" type="checkbox" id="checkbox2" value="2"
       name="checkbox-favorites">
<label class="add-to-favorites-checkbox-icon" for="checkbox2"><span></span> Add to fav 2 </label>
</span>

CSS is not recognising checked attribute of checkbox when changing from jQuery

1 Answers1