How to add a “readonly” attribute to an <input>?

Question

How can I add readonly to a specific <input>? .attr('readonly') does not work.

It depends on which DOCTYPE do you use. For HTML 4.01 DTD's the answer from CMS is working and valid HTML 4.01. If you use a XHTML DTD then the answer from ceejayoz is working and valid XHTML. — bjoernwibben
– bjoernwibben, Commented Aug 20, 2009 at 15:01
It doesn't depend on doctype, the DOM is the same whether it was read in through HTML or XML, and in any case XHTML is almost always still actually served as HTML not XML, for IE compatibility. — bobince
– bobince, Commented Sep 11, 2009 at 16:44

Community · Accepted Answer · 2017-05-23 12:02:58Z

641

jQuery <1.9

$('#inputId').attr('readonly', true);

jQuery 1.9+

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

Read more about difference between prop and attr

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Aug 20, 2009 at 14:50

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jonas Stensved Over a year ago

Are you sure? I thought so aswell but can't find anything about in the specs. <input name="foo" readonly="readonly" value="bar" /> validates perfectly at validator.w3.org with xhtml 1.0 strict.

frshca Over a year ago

This post should be changed to .prop() rather than .attr(), as stated in the jQuery API: jquery.com/upgrade-guide/1.9/#attr-versus-prop-

Luke Over a year ago

The readonly attribute is a "boolean attribute" -- whatwg.org/specs/web-apps/current-work/#boolean-attribute Despite the somewhat misleading name, the values should not be "true" or "false". While I think the code above will actually work (tested in Chrome with jQuery 1.8.1), it can lead to later confusion for the inexperienced. Also, according to the jQuery docs the value should be number or string, not a boolean. api.jquery.com/attr/#attr2

Greg · Accepted Answer · 2011-11-30 05:29:03Z

160

Use $.prop()

$("#descrip").prop("readonly",true);

$("#descrip").prop("readonly",false);

answered Nov 30, 2011 at 5:29

Greg

8,87421 gold badges72 silver badges110 bronze badges

3 Comments

evan w Over a year ago

After reading the jQuery API for .prop, this should be the accepted answer. I'd always done .attr('readonly', 'readonly') and .removeAttr('readonly') in the past, but this seems to be more correct and makes the code cleaner as well.

frshca Over a year ago

Everyone should use this answer, as stated here: jquery.com/upgrade-guide/1.9/#attr-versus-prop-

Luke Over a year ago

A word of caution with using $.prop(): Prop will set the readonly attribute to blank/empty string, so if you have have any CSS that uses the attribute selector for [readonly="readonly"], then you'll have to change this to [readonly] (or include both).

user1310388 · Accepted Answer · 2012-04-09 17:31:02Z

30

Readonly is an attribute as defined in html, so treat it like one.

You need to have something like readonly="readonly" in the object you are working with if you want it not to be editable. And if you want it to be editable again you won't have something like readonly='' (this is not standard if I understood correctly). You really need to remove the attribute as a whole.

As such, while using jquery adding it and removing it is what makes sense.

Set something readonly:

$("#someId").attr('readonly', 'readonly');

Remove readonly:

$("#someId").removeAttr('readonly');

This was the only alternative that really worked for me. Hope it helps!

answered Apr 9, 2012 at 17:31

user1310388

Comments

ceejayoz · Accepted Answer · 2009-08-20 14:50:47Z

20

.attr('readonly', 'readonly') should do the trick. Your .attr('readonly') only returns the value, it doesn't set one.

answered Aug 20, 2009 at 14:50

ceejayoz

181k42 gold badges311 silver badges382 bronze badges

2 Comments

bobince Over a year ago

jQuery's attr() works on JavaScript properties, not HTML attributes, even though the names imply otherwise. attr('readonly') is actually operating on the DOM Level 1 HTML property readOnly, which is a boolean, so ‘true’ is more appropriate. However, the string 'readonly' is also a truthy value when automatically converted to a boolean, so the above still works.

Luke Over a year ago

I don't think you want to set the attribute to 'true'. The .attr value should only be a string or number, not a boolean, according to the jQuery docs: api.jquery.com/attr/#attr2 Also, HTML "boolean attributes" should only be empty string or the value of the attribute. I think the solution is to use .prop() to avoid confusion.

Pier · Accepted Answer · 2009-09-11 16:40:12Z

16

I think "disabled" excludes the input from being sent on the POST

answered Sep 11, 2009 at 16:40

Pier

3 Comments

Jonas Stensved Over a year ago

Yes it does. I found this thread while searching for an alternative to "disabled" just for this reason.

Geomorillo Over a year ago

but you can enable it just before sending it , and disable it later $(document).on('submit', "#myform", function(e) { //enable inputs return true; // then disable it again if you require } it works i tested it

Ajay Takur Over a year ago

Does read only input values in html are allowed to sent on POST without using hidden ?

Steve · Accepted Answer · 2011-03-25 03:34:51Z

12

You can disable the readonly by using the .removeAttr;

$('#descrip').removeAttr('readonly');

answered Mar 25, 2011 at 3:34

Steve

1211 silver badge2 bronze badges

Comments

Diogo Rodrigues · Accepted Answer · 2015-05-08 23:40:40Z

7

Use the setAttribute property. Note in example that if select 1 apply the readonly attribute on textbox, otherwise remove the attribute readonly.

http://jsfiddle.net/baqxz7ym/2/

document.getElementById("box1").onchange = function(){
  if(document.getElementById("box1").value == 1) {
    document.getElementById("codigo").setAttribute("readonly", true);
  } else {
    document.getElementById("codigo").removeAttribute("readonly");
  }
};

<input type="text" name="codigo" id="codigo"/>

<select id="box1">
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
</select>

edited May 8, 2015 at 23:40

answered May 8, 2015 at 16:49

Diogo Rodrigues

1,34215 silver badges15 bronze badges

Comments

VoodooChild · Accepted Answer · 2011-02-07 08:08:09Z

5

For enabling readonly:

$("#descrip").attr("readonly","true");

For disabling readonly

$("#descrip").attr("readonly","");

edited Feb 7, 2011 at 8:08

VoodooChild

9,8049 gold badges70 silver badges101 bronze badges

answered Aug 19, 2010 at 13:51

Pradeep

4171 gold badge5 silver badges2 bronze badges

3 Comments

David Clarke Over a year ago

From api.jquery.com/attr "As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method."

Luke Over a year ago

The attribute should not be set to a string of "true". This may work, but is not technically correct. (See my previous comments above.)

MiFiHiBye Over a year ago

Don't use this suggestion, much better ones available here. "true" is not correct for setting, and removing is also incorrect.

warpi · Accepted Answer · 2021-01-08 21:21:37Z

-3

Check the code below:

<input id="mail">

<script>

 document.getElementById('mail').readOnly = true; // makes input readonline
 document.getElementById('mail').readOnly = false; // makes input writeable again

</script>

edited Jan 8, 2021 at 21:21

user4730812

answered Jan 8, 2021 at 17:57

warpi

11 bronze badge

Comments

John Moutafis · Accepted Answer · 2017-07-23 02:06:30Z

-8

For jQuery version < 1.9:

$('#inputId').attr('disabled', true);

For jQuery version >= 1.9:

$('#inputId').prop('disabled', true);

edited Jul 23, 2017 at 2:06

John Moutafis

23.3k11 gold badges74 silver badges118 bronze badges

answered Jul 22, 2017 at 12:03

Osman Adak

211 bronze badge

Collectives™ on Stack Overflow

How to add a “readonly” attribute to an <input>?

10 Answers 10

3 Comments

3 Comments

Comments

2 Comments

3 Comments

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

3 Comments

3 Comments

Comments

2 Comments

3 Comments

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related