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)

Answer 1

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 *.

Answer 2

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/