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!

Alejandrinaalejandro

Please read the documentation: api.jquery.com/prop/#prop2 – Dwight

wow Felix Kling so helpful – Irritation

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.

Schlesien

$('#box').prop('checked') === false would be quicker than jQuery's :checked. It'll still get the job done! – Hermetic

Thanks for pointing for the performance, I have updated the code for that. – Schlesien

Answer 2

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

Slew

You can use if(!$('#box').prop('checked')){} instead – Sterigma

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)

Nila

I had the same issue - it is not constructive to get downvoted without a comment. I'll vote you up for a correct answer – Lux

Answer 4

Try this

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

Radiology

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);
  });  
});

Lux

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.

Zygodactyl

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

Freitag