Question

How to make a textarea and input type read only using jQuery?

Answer 1

Include it in your selector (using a multiple/element selector), like this:

$('input[type="text"], textarea').attr('readonly','readonly');

You can test it here, if it's the only thing you're doing, there's no need for a .each(), you can just call .attr() on all matched elements.

In latest versions of jQuery, the use of method prop is preferred over use of attr.

To make a particular textarea readonly:
$('#mytextarea1').prop('readonly', true);

To make all textareas readonly:
$('textarea').prop('readonly', true);

To make all 'text' fields readonly:
$('input[type=text]').prop('readonly', true);

To make all 'text' fields and textarea readonly:
$('input[type=text],textarea').prop('readonly', true);

Please also note the difference between 'readonly' and 'disabled' in terms of appearance:

Below is a <textarea> with disabled set to true:
(looks different from a regular textarea)

Below is a <textarea> with readonly set to true:
(looks same as a regular textarea)