How to add the readonly attribute with JQuery or Javascript (BUT following the W3C standard!)

Question

The following code to add and remove the property readonly works (gotten from here):

$('#someid').prop('readonly', true);
$('#someid').removeProp('readonly');

But the W3C standard recommend to use the readonly attribute without a value (gotten from here):

We should use: <input type="text" readonly />

Instead: <input type="text" readonly="true or readonly or anything" />

As $('#someid').prop('readonly'); doesn't work. What is the code to do it properly?

Answer 1

The proper way to do it is with :

$('#someid').prop('readonly', true);

or

$('#someid').prop('readonly', false);

and

$('#someid').removeProp('readonly');

works fine as well as these are all jQuery methods for the native:

document.getElementById('someid').readOnly = true;

which sets the readonly property appropriately, and if you inspect the element in the console you'll see that the readonly attribute is added without a value like it should be according to the W3C specifications.

readonly is a property, and prop() is the method for setting properties.

The specifications for HTML5 says:

readonly = "readonly" or "" (empty string) or empty
Specifies that element represents a control whose value is not meant to be edited.

this means the following is valid:

<input type="text" readonly />
<input type="text" readonly="" />
<input type="text" readonly="readonly" />