jQuery .prop('checked', false) does not work

Question

HTML:

<form class="form">
    <input type="checkbox" id="box" /> Check Me!
</form>

JS:

$(window).load(function() {
    var myFunc = function() {
        if($('#box').prop('checked', false)) {
            $('.form').append('<p>Checkbox is not checked.</p>');
        }
    }

    $('#box').on('change', myFunc);
});

Here is a JSFiddle http://jsfiddle.net/3PYm7/

When I use $('#box').prop('checked', false) as a condition for the if statement it does not work, but ! $('#box').prop('checked') works just fine!

Answer 1

The statement $('#box').prop('checked', false) does not return boolean rather set the checked property to false so should not be used in condition and it normal behaviour

if($('#box').prop('checked', false))

Could be changed to test using is() with :checked selector.

if($('#box').is(':checked'))

or

if($('#box:checked').length)

You can get the best performance by using the native javascript

if(document.getElementById('box').checked)

The working statement $('#box').prop('checked') you mentioned returns the checked property value instead of setting.

Answer 2

  if ($('#box').prop('checked')==false) {
      $('.form').append('<p>Checkbox is not checked.</p>');
  }

Answer 3

yeah that's a known one,

$('#box').prop('checked', false) is a setter version, it would return the element on which the .prop() method has been invoked, not a boolean result. You should use the getter version instead to get the boolean value, $('#box').prop('checked')

Read here to know more about .prop(property)

Answer 4

Try this

if($('#box').is(':checked')) // this will return true or false

Answer 5

You have more issues than using a setter which does not return a boolean to test a property.

Your code will, when fixed, append the message every time you uncheck.

I suggest this

Live Demo

$(function() {
   $('#myform').on("submit", function(e) {
     var checked = $('#box').is(":checked");
     $('#pleaseCheckBoxMessage').toggle(!checked);
     if (!checked) {
       e.preventDefault(); // stop submission
     }
  });
  $("#box").on("click",function() {
    $('#pleaseCheckBoxMessage').toggle(!this.checked);
  });  
});

Answer 6

This is a general problem with jQuery, the idea was to have the same function name for getting and setting a value via jQuery, but this is very confusing to newcomers.

For example .val('bla') sets value bla but .val() returns the current value... This is pretty much the same for attr, prop, ... and each of them has a StackOverflow question because someone did not understand how it was supposed to work. Had it been called getProp, setProp, these problems would not exist.

Answer 7

Try like this .It is also another way to checking

if (!$('#box').prop('checked')) {
        $('.form').append('<p>Checkbox is not checked.</p>');
    }

Updated Demo

$('#box').prop('checked') It will return true or false when check box is changed