jQuery inconsistency in setting readonly attribute

Question

This is my code inside document.ready:

var $inputs = mySelectors();
$inputs.each(function() {
$(this).attr("readonly", "true");

});

This code works for IE8, but not for FF3.5

IE output(as seen with IE Developer toolbar)<input type="text" readOnly="readonly"..../>

FF output (seen with Firebug) <input type="text" readonly="">

What is the right way to set it ?

$elem.attr("readonly","true");

or

$elem.attr("readonly","readonly");

or

$elem.attr("readOnly","readonly"); //note the uppercase O in Only

Looks like there was an old bug but not sure if it got resolved. http://osdir.com/ml/jquery-dev/2009-05/msg00115.html

reference:http://api.jquery.com/attr/

Cross-browser consistency: Some attributes have inconsistent naming from browser to browser. Furthermore, the values of some attributes are reported inconsistently across browsers, and even across versions of a single browser. The .attr() method reduces such inconsistencies.

IS there a way to tackle this cross browser inconsistency ?

Answer 1

The functionality for getting/setting properties (as opposed to setting attributes) were fundamentally changed in jQuery 1.6. As of jQuery 1.6.1 it's still possible to get/set these boolean properties using .attr('readonly'), however the preferred usage is

 $elem.prop('readonly', true);

This change was promoted by the ambiguity of attributes (which reflect the inital state of the element) and properties (which represent the current state of the DOM node).

For more information: http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/

Answer 2

If it were my code, I'd probably set it to plain boolean "true":

$elem.attr('readOnly', true);

When you say that it doesn't work; what exactly happens?

Here's a sample script: http://gutfullofbeer.net/readonly.html

That one uses my method above, and it works just fine in Firefox for me. Firebug shows the attribute like that because it feels like it.

Answer 3

This should be the right way:

$elem.attr("readonly","readonly");

This way, you create valid XHTML as every attribute has to have a value and element and attribute names have to be lower case. For most boolean attributes that means that the value is the same as the name.

See also here:

This is a boolean attribute, so it has no contents. In valid XHTML write readonly="readonly"

And also this remark:

Some HTML user agents are unable to interpret boolean attributes when these appear in their full (non-minimized) form, as required by XML 1.0. Note this problem doesn't affect user agents compliant with HTML 4. The following attributes are involved: compact, nowrap, ismap, declare, noshade, checked, disabled, readonly, multiple, selected, noresize, defer.

Or you change the document type ;)

Answer 4

This is one of those irritating minute differences between IE and FF syntax. IE uses camel case where FF does not.

IE syntax: readOnly="readonly"

FF syntax: readonly="readonly"