JQuery mismatch when 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 shown in the IE Developer toolbar) <input type="text" readOnly="readonly"..../>

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

What is the correct way to install it?

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

or

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

or

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

It seems like there was an old mistake, but not sure if it was resolved. http://osdir.com/ml/jquery-dev/2009-05/msg00115.html

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

Browser Compatibility: Some attributes have inconsistent naming from browser to browser. Moreover, the values ​​of some attributes were reported inconsistently by browsers and even in versions of a single browser. The .attr () method reduces such inconsistencies.

Is there a way to overcome this inconsistency between browsers?

Answer 1

If this were my code, I would probably set it to the logical "true":

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

When you say that it does not work; what exactly is going on?

Here's an example script: http://gutfullofbeer.net/readonly.html

This method uses my method above and it works fine in Firefox for me. Firebug shows an attribute like this because it feels like this.

Answer 2

The functionality for getting / setting properties (as opposed to setting attributes) was fundamentally changed in jQuery 1.6. Starting with jQuery 1.6.1, you can still get / set these boolean properties using .attr('readonly') , however the preferred use is

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

This change was caused by the ambiguity of the attributes (which reflect the internal 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 3

This should be the right way:

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

Thus, you create a valid XHTML as each attribute must have a value and the names of the elements and attributes must be lowercase . For most logical attributes, this means that the value matches the name.

See also here :

This is a boolean attribute, therefore it does not contain content. In valid XHTML write readonly="readonly"

And also this note :

Some HTML user agents cannot interpret logical attributes if they are displayed in their full (not minimized) form, as required by XML 1.0. Please note that this problem does not affect user agents compatible with HTML 4. The following attributes apply: compact, nowrap, ismap, declare, noshade, checked, disabled, readonly, multiple, selected, noresize, defer.

Or you change the type of document;)

Answer 4

This is one of those annoying minute differences between the syntax of IE and FF. IE uses the camel case where there is no FF.

IE Syntax: readOnly = "readonly"

FF Syntax: readonly = "readonly"