CODEWITHSUNDEEP
jqueryhtmlforms
Phill Pafford
Phill Pafford

Reputation: 85308

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 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)

Upvotes: 40

Views: 109384

Answers (4)

Rossitten
Rossitten

Reputation: 1166

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

probably the best way to do that

Upvotes: 3

Emmanuel
Emmanuel

Reputation: 51

To get all elements of form:

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

Upvotes: 5

John Hartsock
John Hartsock

Reputation: 86872

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/

Upvotes: 42

Kobi
Kobi

Reputation: 138017

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

Upvotes: 84

Related Questions