Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to make a textarea and input type read only using jQuery?
To make a textarea and input type read only, use the attr() method or the prop() method in jQuery. The readonly attribute prevents users from editing the content while still allowing the elements to be focused and their values to be submitted with the form.
Using the attr() Method
The attr() method sets HTML attributes on selected elements. To make input fields and textareas read only, set the readonly attribute −
$('input[type="text"], textarea').each(function() {
$(this).attr('readonly', 'readonly');
});
Example
The following example uses the attr() method to set readonly on a text input and textarea ?
<!DOCTYPE html>
<html>
<head>
<title>Make Elements Readonly with attr()</title>
<style>
label { display: block; margin-top: 10px; font-weight: bold; }
input, textarea { margin: 5px 0; padding: 8px; width: 300px; }
</style>
</head>
<body>
<label>Text Input:</label>
<input type="text" id="txt1" value="This text field is now readonly" />
<label>Textarea:</label>
<textarea id="ta1" rows="3">This textarea is now readonly</textarea>
<p id="status"></p>
<script>
var inputs = document.querySelectorAll('input[type="text"], textarea');
inputs.forEach(function(el) {
el.setAttribute('readonly', 'readonly');
});
document.getElementById('status').textContent =
'Both elements are now readonly (set via attr approach).';
</script>
</body>
</html>
The text input and textarea are set to readonly when the page loads. Users can see and select the text but cannot modify it.
Using the prop() Method
You can also use the prop() method instead of attr(). This is the recommended approach for boolean properties like readonly, disabled, and checked as it works directly with DOM properties −
$('input[type="text"], textarea').prop('readonly', true);
Example
The following example uses the DOM readOnly property (equivalent to jQuery's prop() method) to set readonly ?
<!DOCTYPE html>
<html>
<head>
<title>Make Elements Readonly with prop()</title>
<style>
label { display: block; margin-top: 10px; font-weight: bold; }
input, textarea { margin: 5px 0; padding: 8px; width: 300px; }
</style>
</head>
<body>
<label>Text Input:</label>
<input type="text" id="txt1" value="Readonly via prop approach" />
<label>Textarea:</label>
<textarea id="ta1" rows="3">Readonly via prop approach</textarea>
<p id="status"></p>
<script>
var inputs = document.querySelectorAll('input[type="text"], textarea');
inputs.forEach(function(el) {
el.readOnly = true;
});
document.getElementById('status').textContent =
'Both elements are now readonly (set via prop approach).';
</script>
</body>
</html>
Setting el.readOnly = true in vanilla JavaScript is the equivalent of $(el).prop('readonly', true) in jQuery.
Removing the Readonly Property
To remove the readonly property and make elements editable again, you can use either approach −
// Using attr() method - remove the readonly attribute
$('input[type="text"], textarea').removeAttr('readonly');
// Using prop() method - set readonly to false
$('input[type="text"], textarea').prop('readonly', false);
Key Differences Between attr() and prop()
| Feature | attr() | prop() |
|---|---|---|
| Works with | HTML attributes | DOM properties |
| Best for | String attributes (href, src, etc.) | Boolean properties (readonly, disabled, checked) |
| Performance | Slightly slower | Faster and more reliable |
| Removal | removeAttr('readonly') |
prop('readonly', false) |
Conclusion
Both attr() and prop() methods effectively make textarea and input elements readonly in jQuery. Use prop() for boolean properties like readonly as it provides better performance and more predictable behavior.
3K+ Views
