JavaScript add a disabled attribute to the input filed | Example

Simply Set the element’s disabled property to false to add a disabled attribute to the input using JavaScript. Use id and set a disabled property to false.

document.getElementById('my-input-id').disabled = false;

JavaScript add disabled attribute to input example

HTML example code adding a disabled attribute into HTML input filed dynamically using JavaScript.

In inception mode you can see input filed have disabled attribute.

<!DOCTYPE html>
<html>
<body>

    <input type="text" id="fname" name="fname"><br>
    <input type="button" name="butn" value="Button">

    <script type="text/javascript">

       document.getElementById('fname').disabled = true;

    </script>

</body>

</html>

Output:

If you’re using jQuery, the equivalent would be:

$('#my-input-id').prop('disabled', false);

For several input fields, you may access them by class instead:

var inputs = document.getElementsByClassName('my-input-class');
for(var i = 0; i < inputs.length; i++) {
    inputs[i].disabled = false;
}

Do comment if you have any doubts and suggestions on this topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.