With the release of jQuery 1.6, the recommendation on SO has been to generally start using prop() where you used to use attr().
What happens when I want make an element readonly?
$('.control').prop('readonly', 'readonly');
$('.control').prop('readonly', true);
Neither of these seem to make the control readonly. Is making an element readonly the exception to the rule?
The problem is that the property name is case-sensitive. Try:
$('.control').prop('readOnly', true);
Though really I don't know why this requires jQuery. This works just as well:
document.getElementsByClassName("control")[0].readOnly = true;
Try this:
$(".control").prop({ readOnly: true });
I think of it like this: .attr() gets the default value in the html markup while .prop() gets/sets the value dynamically. Look at the following:
<input id="someInput" readonly="readOnly" />
$(".control").attr("readOnly") // would yield "readOnly"
$(".control").prop("readOnly") // would yield true
$(".control").is(":readOnly") // would yield true
The api documentation says this:
The difference between attributes and
properties can be important in
specific situations. Before jQuery
1.6, the .attr() method sometimes took property values into account when
retrieving some attributes, which
could cause inconsistent behavior. As
of jQuery 1.6, the .prop() method
provides a way to explicitly retrieve
property values, while .attr() only
retrieves attributes.