jQuery inconsistency in setting readonly attribute in IE-8 and FF-3.5.8

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

This should be the right way:

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

http://www.w3schools.com/tags/att_input_readonly.asp

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 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.