.attr() versus .prop()
jQuery 1.6 introduced the .prop() method for setting or getting properties on nodes and deprecated the use of .attr() to set properties. However, versions up to 1.9 continued to support using .attr() for specific situations. This behavior in the name of backwards compatibility causes confusion when selectors are used that distinguish between attributes and properties.
For example, boolean attributes such as checked and disabled on a checkbox are affected by this change. The correct behavior of "input[checked]" is to select checkboxes that have a checked attribute, regardless of its string value, and regardless of their current state. In contrast, "input:checked" selects checkboxes that are currently checked as reflected in their boolean (true or false) checked property, which is affected when the user clicks the box for example. Versions prior to 1.9 sometimes do not select the correct nodes with these selectors.
Here are some examples of correct and incorrect usage when setting checked on a checkbox; the same rules apply for disabled. Note that only the property consistently reflects and updates the current state of the checkbox across all browsers; rarely will you need to set the attribute.
// Correct if changing the attribute is desired
// Correct for checking the checkbox
// Correct if removing the attribute is desired
// Correct for clearing the checkbox
The value property versus attribute on input elements is another example of this ambiguity. The attribute generally reflects the value that was read from the HTML markup; the property reflects the current value. Since the .val() method is the recommended jQuery way to get or set the values of form elements, this confusion usually does not affect users.
However, when a selector like "input[value=abc]" is used, it should always select by the value attribute and not any change made to theproperty by the user, for example from them typing into a text input. As of jQuery 1.9, this behaves correctly and consistently. Earlier versions of jQuery would sometimes use the property when they should have used the attribute.
The jQuery Migrate plugin restores the old attribute-vs-property rules.
So basically we might be interested in what the checked attribute of a checkbox was when the page loaded using
or we might want to know what its current state of being checked is using
but for the sake of cross-browser compatibility we will always set the state of a checkbox using