jQuery: Uncheck checkbox when page is clicked

Question

I am attempting to do two things:

Ensure a checkbox is not checked on page load by unchecking it
If a checkbox is checked and the mouse is clicked anywhere else on the screen, it will be unchecked.

For the first part, I have tried:

$(document).ready(function() {  

    $('#cbox').removeAttr('checked');

});

However, this will not allow me to check it manually once the page is loaded.

For the second part, I tried:

$(document).click(function() {  

    if ($('#cbox').is(':checked')) {
        $('#cbox').removeAttr('checked');
    }

});

But the problem with this is that if you click the actual checkbox to check it, the check is fired before this is, so the checkbox is always not checked.

How can I correct this?

Once the check-box is checked you've just prohibited any further action on the page; so...what's your use-case for this functionality? And are you clearly communicating that use-case to the users, I strongly suspect that it will be confusing, if not wholly frustrating, in terms of user-interface. — David Thomas, Jan 27 '17 at 22:00
I agree. Every time you click on some other element, like to select something from a menu or type into a text field, it will uncheck the checkbox. — Barmar, Jan 27 '17 at 22:01
I know how this is interacting with the user, I just need to know how to solve the question. — MultiDev, Jan 27 '17 at 22:06
Instead of $('#cbox').removeAttr('checked'); use:$('#cbox').prop('checked', false) — Nedim Hozić, Jan 27 '17 at 22:11

score 0 · Accepted Answer · answered Jan 27 '17 at 22:17

http://jsbin.com/tuqasapare/edit?html,js,console,output

$(document).ready(function() {
    $("#cbox").prop('checked', false);

    $("#cbox").on('click', function(event) {
        event.stopPropagation();
    })

  $(document).click(function() {
      $("#cbox").prop('checked', false);
  })
});

jQuery: Uncheck checkbox when page is clicked

1 Answers1