348

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

Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
Qiao
  • 16,565
  • 29
  • 90
  • 117
  • 2
    .attr('readonly', true) works, other dont – Qiao Aug 20 '09 at 14:54
  • 3
    .attr('readonly', 'readonly') also works – Qiao Aug 20 '09 at 14:56
  • 3
    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 Aug 20 '09 at 15:01
  • 2
    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 Sep 11 '09 at 16:44

10 Answers10

631

jQuery <1.9

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

jQuery 1.9+

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

Read more about difference between prop and attr

Community
  • 1
  • 1
Christian C. Salvadó
  • 807,428
  • 183
  • 922
  • 838
  • 1
    Are you sure? I thought so aswell but can't find anything about in the specs. validates perfectly at validator.w3.org with xhtml 1.0 strict. – Jonas Stensved Aug 09 '11 at 13:16
  • 17
    This post should be changed to .prop() rather than .attr(), as stated in the jQuery API: http://jquery.com/upgrade-guide/1.9/#attr-versus-prop- – frshca Feb 05 '13 at 20:54
  • The readonly attribute is a "boolean attribute" -- http://www.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. http://api.jquery.com/attr/#attr2 – Luke Oct 28 '13 at 19:48
159

Use $.prop()

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

$("#descrip").prop("readonly",false);
Greg
  • 8,574
  • 21
  • 67
  • 109
  • 9
    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. – evan w Sep 27 '12 at 00:47
  • 4
    Everyone should use this answer, as stated here: http://jquery.com/upgrade-guide/1.9/#attr-versus-prop- – frshca Feb 05 '13 at 20:53
  • 4
    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). – Luke Oct 28 '13 at 19:58
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!

20

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

ceejayoz
  • 176,543
  • 40
  • 303
  • 368
  • 16
    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. – bobince Sep 11 '09 at 17:00
  • 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: http://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. – Luke Oct 28 '13 at 20:02
16

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

  • 4
    Yes it does. I found this thread while searching for an alternative to "disabled" just for this reason. – Jonas Stensved Aug 09 '11 at 13:04
  • 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 – Geomorillo Dec 05 '14 at 18:15
  • Does read only input values in html are allowed to sent on POST without using hidden ? – Ajay Takur Jul 19 '16 at 16:56
12

You can disable the readonly by using the .removeAttr;

$('#descrip').removeAttr('readonly');
Steve
  • 121
  • 1
  • 2
5

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>
Diogo Rodrigues
  • 1,312
  • 15
  • 15
5

For enabling readonly:

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

For disabling readonly

$("#descrip").attr("readonly","");
VoodooChild
  • 9,776
  • 8
  • 66
  • 99
Pradeep
  • 417
  • 1
  • 5
  • 2
  • From http://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." – David Clarke Aug 16 '13 at 03:09
  • 1
    The attribute should not be set to a string of "true". This may work, but is not technically correct. (See my previous comments above.) – Luke Oct 28 '13 at 20:05
  • Don't use this suggestion, much better ones available here. "true" is not correct for setting, and removing is also incorrect. – MiFiHiBye Feb 26 '19 at 19:06
-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>
piotrek1543
  • 19,130
  • 7
  • 81
  • 94
warpi
  • 1
  • 1
-8

For jQuery version < 1.9:

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

For jQuery version >= 1.9:

$('#inputId').prop('disabled', true);
John Moutafis
  • 22,254
  • 11
  • 68
  • 112
Osman Adak
  • 21
  • 1