jQuery - Disable (Read Only) All Input Field on Page Load using jQuery.

IncludeHelp 09 August 2016

Make All Input Text Fields Read Only, Disable All Input Text Fields using jQuery on Page Load - In this code snippet, we learn how to make Input Text Field along with Textarea field using jQuery on page load.

In this example we are displaying name, age and address. Name and Age is displaying in Input Text Box and Address is displaying in Textarea field. When page will be loaded, jQuery will be activated and make all input text fields Read Only (Disabled).

jQuery Code Snippet - Disable (Read Only) All Input Text Fields using jQuery on Page Load

jQuery/JavaScript

<script>
	$(document).ready(function(){
		/*Disable all input type="text" box*/
		$('#form1 input[type="text"]').prop("disabled", true);
		/*Disable textarea using id */
		$('#form1 #txtAddress').prop("disabled", true);
	});
</script>

HTML Source Code with jQuery/JavaScript

<!--jQuery - Disable (Read Only)  All Input Field on Page Load using jQuery.-->
<html>
	<head>
		<title>jQuery - Disable (Read Only)  All Input Field on Page Load using jQuery.</title>
		<!--Example CSS-->
		<link href="ExampleStyle.css" type="text/css" rel="stylesheet"/>
		<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
		
		<script>
			$(document).ready(function(){
				/*Disable all input type="text" box*/
				$('#form1 input[type="text"]').prop("disabled", true);
				/*Disable textarea using id */
				$('#form1 #txtAddress').prop("disabled", true);
			});
		</script>
	</head>
	<body>
		<h1>jQuery - Disable (Read Only)  All Input Field on Page Load using jQuery.</h1>
	
		<form id="form1">
			<table border="0px">
				<tr>
					<td>Name</td>
					<td><input  type="text" id="txtName" style="width:200px;" value="Mike"/></td>
				</tr>
				<tr>
					<td>Age</td>
					<td><input type="text" id="txtAge" style="width:50px;" value="23"/></td>
				</tr>				
				<tr>
					<td>Address</td>
					<td><textarea   id="txtAddress" cols="40" rows="5">H6, CA, USA</textarea></td>
				</tr>

			</table>
		</form>
		
	</body>
</html>

Result

make input field read only using jQuery, disable all input fields using jQuery