Administrators Nathan Posted February 23, 2018 Administrators Share Posted February 23, 2018 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". You can check out the demo here. View the Prodjex Web Development blog post on how to Disable Input Field on Page Load Using jQuery. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.