How to Disable/Enable Input in jQuery

Often you may need to disable/enable input elements on HTML forms and web pages. There are several ways to do this. You can either use plain JavaScript for this purpose and use a third-party library. If you are using jQuery, then it is very easy to disable or enable input elements on your page. In this article, we will learn how to disable/enable input in jQuery.

How to Disable/Enable Input in jQuery

If you need to disable an input in Static/Dynamic HTML pages, you need to set its ‘disabled’ property to true. If you want to enable it, then don’t mention this property in the input element’s tag, or set it to false.

As per jQuery, every HTML DOM element supports a function called prop() which can be used to add/modify any HTML attributes and properties of not just input elements but also any HTML tag. But this is available only from jQuery 1.6+. If you are using jQuery 1.5 and below then you can use attr() function for this purpose.

If you want to disable all input elements on your page, then here is the command to do it.

jQuery 1.6+

$("input").prop('disabled', true);

jQuery <=1.5

$("input").attr('disabled','disabled');

If you want to re-enable all input elements on your page, then here is the command for it.

jQuery 1.6+

$("input").prop('disabled', false);

jQuery <=1.5

$("input").removeAttr('disabled');

Please note, although there is a removeProp() function available in jQuery 1.6+ you should not use it to enable input elements, since it will completely remove the ‘disabled’ property from the element, and not allow you to add it back again.

Alternatively, if you are referring to a single input DOM element using this keyword, then you can easily disable it using the following code, which works in all versions of jQuery.

this.disabled = true;

and re-enable it using the following code.

this.disabled = false;

If you want to disable a specific input element with id=’myID’, you can use the #myID identifier to search and disable the element.

jQuery 1.6+
$("#myID").prop('disabled', true);

jQuery <=1.5
$("#myID").attr('disabled','disabled');

Similarly, if you have a number of input elements all having the same class name myClass then you can use the identified ‘.myClass’ to identify only those elements and disable them.

jQuery 1.6+
$(".myClass").prop('disabled', true);

jQuery <=1.5
$(".myClass").attr('disabled','disabled');

If you want to disable an input element by its name (e.g. myName) then you can use the square brackets to identify the input element by its name and disable them.

jQuery 1.6+
$("input[name=myName]").prop('disabled', true);

jQuery <=1.5
$("input[name=myName]").attr('disabled','disabled');

In this article, we have learnt how to disable/enable input elements using jQuery. We have also looked at how to select one or more input elements on our page using tag name, id, class name or name attribute. The key is to use the proper identifier to enable/disable elements precisely. Once you have identified the right elements, you can use prop() or attr() functions to easily enable or disable them.

Also read:

How to Run 32-bit App on 64-bit Linux
How to Change File Extension of Multiple Files Using Python
How to Change File Extension of Multiple Files Using Linux
How to Remove HTML Tags from CSV File in Python
How to Convert PDF to CSV in Python