A summary of jQuery’s prop() and attr()

It was in the past couple of weeks that I started learning JavaScript and jQuery and felt like discussing what I had learned in terms of the two functions prop() and attr(). According to my research, prop() is preferred, and compatible with versions 1.6 of jQuery and up, whereas if you are using an older version, only attr() will work.

However, I decided to summarise the issue in my own words.

Lack of visual change with attr()

I was attempting to allow a checkbox to be ticked by clicking on another element. I began with the attr() (attribute) function because it made the most sense – I was adding/modifying an attribute. In order to allow data to be collected from a certain checkbox, I wanted to add the checked attribute to the HTML. The following two methods are acceptable:

<input type="checkbox" class="form-checkbox" checked="checked">
<input type="checkbox" class="form-checkbox" checked>

I was able to add this attribute successfully with jQuery:

$('.form-checkbox').attr('checked', checked);

When I tested the form elements, the property was added when I clicked the checkbox when I inspected the element with my web inspector. However, the visual UI did not actually reflect the change, and the checkbox was not checked.

So I looked into prop().

Solving the above with prop()

It turns out there is a difference between prop() and attr(). This W3Schools demo suggests that attr() will actually give you the default state of the checkbox. Similarly, the attr() docs states the following:

To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

A user posted a question on Stack Overflow about their checkboxes not changing state visually, and the accepted answer provided the solution to use prop() instead, referring to the above documentation.

Separating ‘property’ and ‘attribute’

Developers who are familiar with HTML will understand that they want the checked attribute to be added to their HTML. Our friend attr() does that for us perfectly.

But if we want the checkbox to update its appearance, prop() needs to be added as well. A highly rated question on Stack Overflow, titled .prop() vs .attr(), has an interesting discussion in the comments regarding which to use. In most cases, you will want to use prop().

Apparently, from jQuery 1.6, attr() returns only HTML attributes and not DOM properties. This explains the confusion between the two, and why both functions do different things.

Conclusion

I simply used both prop() and attr(). Most will only need prop(), but it depends on what you are doing with your code.

if ( $this.hasClass('is-selected') ) {
    $this.find('input[type=checkbox]').attr('checked', false).prop('checked', false);
    $this.removeClass('is-selected');
}
else {
    $this.find('input[type=checkbox]').attr('checked', 'checked').prop('checked', 'checked');
    $this.addClass('is-selected');
}

Further reading

Comments on this post

Thanks for sharing your code at the end; it was helpful to see the example in context. :)

That is good that you found a way to do it. It kind of went over my head a bit because I haven’t looked at code and was never that familiar with jQuery, but I know it is very useful!

I have nothing to say because the way this article explains things and gives an example is so well done. I wish you had a love button so I could express my love that way. :)

Good article.

However it’s worth noting that this article only holds true depending on the version of JQuery used.

attr() in newer versions will change the UI for example.