How to Disable Input in JavaScript ?

Last Updated : 07 Aug, 2024

Disabling input fields in JavaScript is a common task when you want to restrict users from interacting with specific form elements. This can be useful in various scenarios, such as preventing modifications to fields that are conditionally locked or ensuring certain inputs are controlled programmatically.

We can use various methods and attributes to disable the input.

Table of Content

Using disabled attribute
Using readOnly attribute

Using disabled attribute

The disabled attribute completely restricts users from interacting with the input elements. When an input field is disabled, it is rendered in an uneditable form and does not accept any input from the users. Additionally, disabled fields are not submitted with the form data.

Syntax:

element.disabled = true;

Example: The below example uses a disabled attribute to disable input in JavaScript.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Using disabled attribute</title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Using disabled attribute</h3>
    <input type="text" id="input1" value="GeeksforGeeks">
    <script>
        document.getElementById("input1").
            disabled = true;
    </script>
</body>

</html>

Output:

Screenshot-2024-02-27-at-11-27-46-Example-1

Using readOnly attribute

The readOnly attribute makes the input field uneditable while visually indicating that it is in a read-only state. Unlike disabled, the readOnly attribute allows the input field to be included in form submissions. This is useful when you want to display data that should not be modified by the user but still needs to be part of the form submission.

Syntax:

element.readOnly = true;

Example: The below example uses the readOnly attribute to disable input in JavaScript.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Using readOnly attribute</title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Using readOnly attribute</h3>
    <input type="text" id="input2" value="GeeksforGeeks">
    <script>
        document.getElementById("input2").
            readOnly = true;
    </script>
</body>

</html>

Output:

Screenshot-2024-02-27-at-11-29-07-Example

By understanding and using the disabled and readOnly attributes appropriately, you can effectively control user interaction with form elements based on your application's requirements.