Home » Javascript JQuery Examples » Removing the Readonly Property with JavaScript and jQuery

Removing the Readonly Property with JavaScript and jQuery

In web development, there are often situations where you need to allow users to edit input fields that are initially set as read-only. In this article, we will explore how to remove the readonly property from input fields using both plain JavaScript and jQuery, complete with HTML code examples.


Javascript – Remove Readonly Property from textbox input

In this example, we have a text input field with the ID “readonlyInput” and a button with the ID “removeReadonlyBtn” that we will use to trigger the removal of the readonly property.

To remove the readonly property using plain JavaScript, you can use the following script:

javascript example:
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Remove Readonly Property</title>
</head>
<body>
    <form>
        <label for="readonlyInput">Readonly Input:</label>
        <input type="text" id="readonlyInput" value="This input is readonly" readonly>
        <button id="removeReadonlyBtn">Remove Readonly</button>
    </form>

    <script>
	document.addEventListener('DOMContentLoaded', function () {
		var readonlyInput = document.getElementById('readonlyInput');
		var removeReadonlyBtn = document.getElementById('removeReadonlyBtn');

		removeReadonlyBtn.addEventListener('click', function () {
			readonlyInput.removeAttribute('readonly');
		});
	});

    </script>

</body>
</html>

In this JavaScript code, we first wait for the DOM content to be fully loaded using the DOMContentLoaded event. Then, we retrieve references to the input field and the button using getElementById. When the button is clicked, we use the removeAttribute method to remove the “readonly” attribute from the input field, allowing users to edit its content.



jQuery – Remove Readonly Property from textbox input

You can achieve the same result with jQuery.

jquery example:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Remove Readonly Property</title>
</head>
<body>
    <form>
        <label for="readonlyInput">Readonly Input:</label>
        <input type="text" id="readonlyInput" value="This input is readonly" readonly>
        <button id="removeReadonlyBtn">Remove Readonly</button>
    </form>

    	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
	$(document).ready(function () {
		$('#removeReadonlyBtn').click(function () {
			$('#readonlyInput').removeAttr('readonly');
		});
	});
	</script>


</body>
</html>

In this jQuery example, we first include the jQuery library from the Content Delivery Network (CDN). Then, we use the $(document).ready() function to ensure the DOM is fully loaded before attaching an event handler to the button with the ID “removeReadonlyBtn.” When the button is clicked, we use the removeAttr method to remove the “readonly” attribute from the input field.

popular readings: