How to uncheck the checkbox in AJAX?

Question

Seriously i have tried everything that i could think of but i still cant find a way how to uncheck the checkbox once popping up the alert.

var sessionvar;
            $.ajaxSetup({cache: false})
            $.get('test.php' ,function (data) {
                sessionvar = data;
                alert(sessionvar);
                if(checked){    
                    if(sessionvar > 2){
                        alert('You only allowed to select maximum 3');
                        setsession(sBorrowValue, "UNSET");
                        $(this).attr('checked', false);
                    }
                    else{
                        setsession(sBorrowValue, "SET");
                    }
                }
                else{
                    setsession(sBorrowValue, "UNSET");
                }
            });

I want to uncheck the checkbox after the alert('You only allowed to select maximum 3'); but not working. i also tried using this.checked = false , $(this).attr('checked', false); , $(this).prop('checked', false); but still its not uncheck the checkbox.

NOTE: this.checked = false works when outside from ajax. but when i put it on the inside, its not working.

Answer 1

You're writing your code inside $.get and trying to refer to that checkbox using $this . Are you sure this is correct? $(this) here is undefined.

You should use checkbox actual id instead:

$('#myCheckboxid').attr('checked', false); //or true

---

EDIT

Your final code would then look like this:

var sessionvar;
$.ajaxSetup({cache: false})
$.get('test.php' ,function (data) {
    sessionvar = data;
    alert(sessionvar);
    if(checked){    
        if(sessionvar > 2){
            alert('You only allowed to select maximum 3');
            setsession(sBorrowValue, "UNSET");
            $('#myCheckboxid').attr('checked', false); //or true
        }
        else{
            setsession(sBorrowValue, "SET");
        }
    }
    else{
        setsession(sBorrowValue, "UNSET");
    }
});

Answer 2

Another way to do it without if statements:

$(".checkbox").prop("checked", !$(".checkbox").prop("checked"));

So !$(".checkbox").prop("checked") equals the opposite of the current checked status - call that toggles checked checkboxes to be unchecked, and vice versa for unchecked checkboxes.

Answer 3

To check/uncheck checkboxes you need to:

$(this).prop('checked', false);    
$(this).prop('checked', true);

It's a property and not an attribute.

NOTE: this.checked = false works when outside from ajax. but when i put it on the inside, its not working.

So you need to bind the "this" object to the get function:

 function setsession() { } var sBorrowValue; $(function () { $('#chk').on('click', function(e) { $.getJSON('https://api.github.com/repositories?since=800' ,function (data) { sessionvar = data; console.log('Now inside the ajax this is: ' + this.outerHTML); alert(sessionvar); if (this.checked){ if(sessionvar > 2){ alert('You only allowed to select maximum 3'); setsession(sBorrowValue, "UNSET"); // use prop $(this).prop('checked', false); } else{ setsession(sBorrowValue, "SET"); } } else{ setsession(sBorrowValue, "UNSET"); } }.bind(this)); }) }); 

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

Answer 4

You should have to uncheck the checkbox by its id not by $(this) and you should also have to check status of checkbox "checked" or not by id of checkbox. Please refer below snippet for more details.

 function setsession() { } var sBorrowValue; $(function () { $('#chk').on('click', function(e) { $.getJSON('https://api.github.com/repositories?since=800' ,function (data) { sessionvar = data; console.log('Now inside the ajax this is: ' + this.outerHTML); $("#chk").prop('checked',false); if ($("#chk").is(':checked')){ $("#chk").prop('checked',false); if(sessionvar > 2){ alert('You only allowed to select maximum 3'); setsession(sBorrowValue, "UNSET"); } else{ setsession(sBorrowValue, "SET"); } } else{ setsession(sBorrowValue, "UNSET"); } }.bind(this)); }) }); 

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

Answer 5

Oh well. I did solve the problem. Its about using variables inside my ajax function actually.

    var sessionvar;
        $.ajaxSetup({cache: false, async:false})
        $.get('test.php' ,function (data) {
            sessionvar = data;
            alert(sessionvar);
        });

        var sBorrowChecked = $('.sBorrow').attr('checked');
        alert(sBorrowChecked);
        if(checked){    
            if(sessionvar > 2){
                alert('You only allowed to select maximum 3');
                setsession(sBorrowValue, "UNSET");
                this.checked = false;

            }
            else{
                setsession(sBorrowValue, "SET");
            }
        }
        else{
            setsession(sBorrowValue, "UNSET");
        }

Notice what i changed? i use async:false . and this time i just tried using this.checked = false . Then it works. However i seems to heard that this async:false has been deprecated. So i am not sure if this is good solution