Javascript Input Set Disabled Example

Jun 29, 2021 . Admin

Hello Friends, Now let's see example of how to use javascript input disabled example. We will use how to use if input set disabled in javascript. Here you will learn how to use javascript input set disabled. This is a short guide on input set disabled. Let's get started with how to input set disabled in javascript. Here i will give you many example how you can check javascript input set disabled. Example: 1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Javascript Input Set Disabled Example</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container mt-5">
            <div class="row">
                <div class="col-md-6 offset-md-3">
                    <div class="card">
                        <div class="card-header">
                            <h3>Javascript Input Set Disabled Example</h3>
                        </div>
                        <div class="card-body">
                            <label>Product Name:</label>
                            <input type="text" id="company" class="form-control">
                            <p>Click button to disable the text field.</p>
                            <button onclick="product()" class="btn btn-primary">Disable Text</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            function product() {
                document.getElementById("company").disabled = true;
            }
        </script>   
    </body>
</html>

Output:

Product Name:
Lenovo (Disabled Text)

Example: 2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript Input Set Read-Only Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
    <body>
        <div class="container mt-5">
            <div class="row">
                <div class="col-md-6 offset-md-3">
                    <div class="card">
                        <div class="card-header">
                            <h3>JavaScript Input Set Read-Only</h3>
                        </div>
                        <div class="card-body">
                            College Name: <input type="text" id="test" class="form-control" readonly>
                            <p>Click button to find out whether the text field is read-only, or not.</p>
                            <button onclick="stud()" class="btn btn-primary">Try it</button>
                            <p id="dept"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        function stud() {
            var c = document.getElementById("test").readOnly;
            document.getElementById("dept").innerHTML = c;
        }
    </script>
</html>

Output: