Choose your poison!
Let’s take the following text field as an example:
<!-- An example text input field --> <input type="text" id="name" value="Wayne">
I have given the input field above the ID “name“. The ID attribute is important as it allows us give each input field a unique ID. This allows us to pinpoint the exact element that we want to disable.
In the code snippet above, we referenced the input field by its ID using the getElementById() method. We then set its disabled attribute to true.
In Chrome, this resulted in the following:
As you can see, the text field has been disabled and “grayed out.”
If you open up your browser’s developer tools and look at the DOM, you will see that the disabled attribute has been added to the field in question:
<!--What it looks like in the DOM--> <input type="text" id="name" value="Wayne" disabled="disabled">
It’s that simple!
Disabling the input field using JQuery.
If you’re already using the JQuery library, then you might want to use the following example:
//Disabling a text input field using JQuery. $('#name').attr('disabled', true);
Hopefully, you found this guide useful!