Sometimes you have some input fields you want to show to the end user but not allow them to edit. For example a profile page where they can update their name, phone number, change their password, but you may want to restrict them from modifying their email address.
Whatever the case may be here’s a simple jQuery example of how to disable a text input field on page load.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Example of how to disable an input field on page load using jQuery">
<meta name="author" content="Projex">
<title>jQuery Disable Input on Page Load | Prodjex Web Development and Consulting</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/signin.css" rel="stylesheet">
<style>
body{background-color: grey;}
p{color: #fff;}
</style>
</head>
<body class="text-center">
<div class="container">
<div class="col-md-12">
<img src="https://forums.prodjex.com/uploads/monthly_2017_12/5a49485fa77dd_logobig.png.0c19c7fc9cc393df1ad69f5ec30877c1.png"><br><br>
<div class="form-group">
<input class="form-control" type="text" name="fname" placeholder="First Name"/>
</div>
<div class="form-group">
<input class="form-control" type="text" name="lname" placeholder="Last Name"/>
</div>
<div class="form-group">
<input class="form-control" type="text" id="exampleID" name="email" placeholder="Email Address"/>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$("#exampleID").prop("disabled",true);
</script>
</body>
</html>
Notice at the bottom of the code
<script>
$("#exampleID").prop("disabled",true);
</script>
This sets the property of “disabled” on the input field that has the ID “exampleID”.
