Adding readonly attribute to all form elements

I'm using jQuery to add a readonly attribute to all form elements but can't seem to figur开发者_如何学JAVAe 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)

---

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

---

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/

---

To get all elements of form:

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

---

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

probably the best way to do that