How to Create a Readonly Textbox with jQuery?

Estimated read time 2 min read

To create a readonly textbox with jQuery, you can use the prop() method to set the “readonly” property of the textbox to true. Here’s an example:

HTML code:

<!DOCTYPE html>
<html>
<head>
	<title>Readonly Textbox with jQuery</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
	<label for="readonly-textbox">Readonly Textbox:</label>
	<input type="text" id="readonly-textbox" value="This is a readonly textbox." />
	
	<script>
		$(document).ready(function(){
			$("#readonly-textbox").prop("readonly", true);
		});
	</script>
</body>
</html>

In this example, we have a label element and an input element with the ID “readonly-textbox”. We also have a script tag where we add our jQuery code.

In the script, we use the prop() method to set the “readonly” property of the “readonly-textbox” element to true. This will make the textbox readonly, so that the user cannot edit the text inside it.

Note that in this example, we are setting the readonly property of the textbox when the document is ready. You can also set this property in response to other events, such as a button click or a form submission.

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply