Jump to content

Disable Input Field on Page Load Using jQuery


Nathan

Recommended Posts

  • Administrators

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...