Adding readonly attribute to all form elements

Question

I'm using jQuery to add a readonly attribute to all form elements but can't seem to figure out how to do this.

Here is what I'm trying:

$('#form1').each( function() { $(this).attr('readonly', true); });

I have a simple form using label/input to display form elements. Also I'm using tipsy (Tool tip plug-in) as well as Formalize (Look and Feel Plug-in)

score 83 · Accepted Answer · answered Oct 26 '10 at 19:26

83

Try this:

$('#form1 input').attr('readonly', 'readonly');

You may want to include more elements #form1 input, #form1 textarea, #form1 select
In jQuery, you usually don't need to iterate over the collection. attr would work for a collection same as for a single element.
In your case, #form1 matched just the <form> element, and each was triggered once, for that element. To find all elements (input or not), you can write #form1 *.

answered Oct 26 '10 at 19:26

Kobi

135,331
41
252
292

3

just a technicality, but "attr('readonly', true)" is better than "attr('readonly', 'readonly'). jQuery's "attr()" method operates on DOM properties, not actual HTML attributes, and the property value for "readonly" must be either "true" or "false". It just so happens that 'readonly' casts to true in javascript, but it's better to include the boolean to start with. – Ben Lee Oct 26 '10 at 19:30
2

@Phill, how *precisely* is it not working for you? Does it do nothing at all? Return a js error? Something else? – Ben Lee Oct 26 '10 at 19:32
@Ben Lee, I'm using FireBug console and I see no execution errors, viewing the source I don't the readonly="readonly" applied to any of the input elements in form1 – Phill Pafford Oct 26 '10 at 19:35
@Phil - look at this example: http://jsfiddle.net/8vSKR/ . Try posting some more code so we can help `:)` – Kobi Oct 26 '10 at 19:39
problem was it was outside of the document.ready scope, placed the code inside and works great. Thanks – Phill Pafford Oct 26 '10 at 19:44
6

Just one note, as input radio doesn't accept "readonly" attribute, with this kind of element you must use this: $('#form1 input[type=radio]').attr('disabled', true) – Marcio Mazzucato May 29 '12 at 19:14
According to http://stackoverflow.com/questions/5891734/setting-a-control-to-readonly-using-jquery-1-6-prop#answer-5891833 the readonly portion is case sensitive and should be 'readOnly' – CamHart Aug 04 '15 at 20:09
@CamHart - Is that documented? As far as I know jQuery deals with that: [`prop`](https://github.com/jquery/jquery/blob/9adfad19865837f5dffedb1eb41e407f196ca515/src/attributes/prop.js#L84-L97), [`attr`](https://github.com/jquery/jquery/blob/9adfad19865837f5dffedb1eb41e407f196ca515/src/attributes/attr.js#L39) . Either way, this answer is a little dated, but the test is working, as far as I see: http://jsfiddle.net/8vSKR/ – Kobi Aug 04 '15 at 20:25

John Hartsock · Answer 2 · 2010-10-26T19:48:32.450

42

This is even better use the input selector. Also note Read only is only for input type of text and password and textarea . It will not work on select elements, radio, checkboxes, buttons. If you want to display but not allow them to type or click. Try using disabled.

$("#form1 :input").attr("disabled", true);

Note: by using disabled it will grey out the input, select or textarea but will not post this element when submitted. If you need it to post let me know and I can help you out.

Here is a demo http://jsfiddle.net/j5PAn/

edited Oct 26 '10 at 19:48

answered Oct 26 '10 at 19:37

John Hartsock

85,422
23
131
146

@Phil I wasnt actually finished entering my question... you may want to re-read – John Hartsock Oct 26 '10 at 19:48
1

@eXtreme you would need to serialize all disabled elements and post your serialized data. – John Hartsock Sep 14 '16 at 18:20

score 5 · Answer 3 · answered Dec 18 '13 at 18:16

5

To get all elements of form:

$.each($('form').serializeArray(), function(index, value){
    $('[name="' + value.name + '"]').attr('readonly', 'readonly');
});

answered Dec 18 '13 at 18:16

Emmanuel

51
1
1

score 3 · Answer 4 · answered Mar 20 '17 at 03:47

3

<form>
    <fieldset disabled>
        <input type="text">
        <input type="radio">
        <input type="checkbox">
    </fieldset>
</form>

probably the best way to do that

answered Mar 20 '17 at 03:47

Rossitten

1,140
1
16
34

Adding readonly attribute to all form elements

4 Answers4