Setting a control to readonly using jquery 1.6 .pr

Question

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?

Answer 1

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.

Answer 2

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;