How to Disable/Enable Input in jQuery

Web developers need to work with many form inputs while building websites and applications. So they need to be able to enable or disable HTML form inputs on their web pages, depending on different use cases. There are several ways to disable/enable form inputs. You can do this using plain JavaScript or third-party libraries like jQuery. In this article, we will learn how to disable/enable input in jQuery as well as using JavaScript. We will also learn how to disable/enable inputs whether it is just one element or multiple elements.

How to Disable/Enable Input in jQuery

Every HTML form input has an attribute called ‘disabled’. If it is set to true or is even present without any value, the input will be disabled. If it is set to false, or is absent from the input then it will be enabled.

Let us say you have the following HTML input.

<input id='my_input' class='my_class' name='my_name'/>

The above input is enabled since it does not have disabled attribute. Please note, all the following inputs are disabled, even where disabled attribute is set to false.

<input id='my_input' class='my_class' name='my_name' disabled/>
<input id='my_input' class='my_class' name='my_name' disabled=false/>
<input id='my_input' class='my_class' name='my_name' disabled='false'/>
<input id='my_input' class='my_class' name='my_name' disabled=true/>
<input id='my_input' class='my_class' name='my_name' disabled='true'/>

Now let us look at different ways to disable/enable input in jQuery.

1. Using prop() function

In jQuery 1.6+, you can use prop() function to disable/enable inputs. It allows you to set/reset any property of any HTML element.

You can disable input by setting disabled property to true.

$('#my_input').prop('disabled',true);

In fact, you can set the disabled property to any string value, to disable it.

$('#my_input').prop('disabled','true');
$('#my_input').prop('disabled','false');
$('#my_input').prop('disabled','disabled');
$('#my_input').prop('disabled','abc');

On the other hand, you can enable input by setting disabled property to false.

$('#my_input').prop('disabled',false);

You can also enable it by setting disabled property to empty string ”.

$('#my_input').prop('disabled','');

You can even call these functions inside an event handler. Let us say you also have a button on the same web page.

<button id='my_button'>click me</button>

Here is a click handler for the button that disables our HTML input above.

$('#my_button').click(function(e){
  $('#my_input').prop('disabled',false);
});

2. Using attr() function

For jQuery 1.5 and below, prop() function is not available. In such cases, use attr() function. It has same syntax as prop() function. Here is the code to disable an input.

$('#my_input').attr('disabled',true);

In fact, like prop(), you can set the disabled property to any string value, to disable it.

$('#my_input').prop('disabled','true');
$('#my_input').prop('disabled','false');
$('#my_input').prop('disabled','disabled');
$('#my_input').prop('disabled','abc');

You can enable HTML input by setting disabled property to false.

$('#my_input').prop('disabled',false);

However, you cannot enable it by setting disabled property to empty string ”. The following code will not work.

$('#my_input').prop('disabled','');

3. Using removeAttr()

jQuery also provides a removeAttr() function to remove an attribute from HTML element. You can use this to enable an input by removing its disabled property.

$('#my_input').removeAttr('disabled');

However, you can only use this to disable an input.

4. Using disabled property

If you are already referencing the input element in a function or event handler, then you can disable it by settings it disabled DOM property and this keyword.

this.disabled=true

Similarly, you can enable it by setting this property to false.

this.disabled=false

Here is an example to disable all inputs with class=my_class.

$('.my_class').each(function(e){
  this.disabled=true;
});

5. For multiple elements

So far, we have only seen examples to disable/enable single HTML input. But you can also use prop() and attr() functions to disable multiple elements at one go.

Here is an example to disable all inputs with class=my_class using prop() and attr() functions.

$('.my_class').prop('disabled',true);
$('.my_class').attr('disabled',true);

On the other hand, here is how to enable them.

$('.my_class').prop('disabled',false);
$('.my_class').attr('disabled',false);

Similarly, you can disable multiple elements by simply changing the jQuery selector. Depending on whether the CSS selector returns one or more elements, prop() and attr() functions will automatically update their properties. Here is an example to disable and enable inputs with name=my_name.

// disable elements
$('input[name=my_name]').prop('disabled',true);
$('input[name=my_name]').attr('disabled',true);

// enable elements
$('input[name=my_name]').prop('disabled',false);
$('input[name=my_name]').attr('disabled',false);

If your jQuery selector returns multiple elements, you can always use array index to precisely select the appropriate item. When a jQuery selector returns multiple items, they are indexed starting with 0, 1, 2, … Here is the code to disable/enable only the second input with class=my_class, using index=1.

// disable input
$('.my_class')[1].prop('disabled',true);
$('.my_class')[1].attr('disabled',true);

//enable input
$('.my_class')[1].prop('disabled',false);
$('.my_class')[1].attr('disabled',false);

6. Creating JS Prototype functions

If you need to disable/enable many input elements across your website, you can simply create a prototype function for this purpose, save it in a JS file and include it on your web pages. They provide a very concise way to do these things. Here are couple of functions to illustrate it.

$.prototype.enable = function () {
    $.each(this, function (index, el) {
        $(el).prop('disabled',false);
    });
}

$.prototype.disable = function () {
    $.each(this, function (index, el) {
        $(el).prop('disabled', true);
    });
}

In the above code, we have used prop() function. If you are using jQuery <=1.6 then you can use attr() function instead.

Once you have defined the prototype function as shown above, you can easily call them on any element. Here is how you can enable the input element using prototype functions.

$('#my_input').enable();

Here is how you can disable the input element.

$('#my_input').disable();

7. Using Plain JavaScript

If you do not have jQuery on your website, or do not want to use it, then you can also disable/enable input elements using plain JavaScript. In this case, we will need to use getElementById() function to first select the input. Then we need to call setAttribute() function to set its disabled attribute. Here is the code to disable HTML input.

document.getElementById('my_input').setAttribute('disabled','disabled');

If you want to enable the input, you will need to call removeAttribute() function.

document.getElementById('my_input').setAttribute('disabled');

As you can see, JavaScript code is much longer than jQuery. Also, in jQuery, you can select single element or multiple elements, just by changing the CSS selector in prop() or attr() functions. In JavaScript, you will need to use getElementById() function to select item using its ID attribute, getElementsByClassName() to select item by its class name, and so on. This means you need to use different functions depending on your selector. This can be tedious. In jQuery, prop() and attr() functions automatically handle single as well as multiple items. Nevertheless, if you simply cannot use jQuery on your web pages, then you can go for plain JavaScript approach.

8. Toggle Disable/Enable States

Sometimes, you may want to just toggle an input element based on the click of a button. In such cases, you can use the prop() or attr() function to invert the present value of disabled attribute.

$("#my_input").prop('disabled', !$("#my_input").prop('disabled') );
$("#my_input").attr('disabled', !$("#my_input").attr('disabled') );

You can place this code, inside the click handler of a button to toggle the input based on button click.

<button id='my_button'>Toggle Input</button>

$('#my_button').click(function(e){
  $("#my_input").prop('disabled', !$("#my_input").prop('disabled') );
});

Important Note

Please do not use removeProp() function to remove disabled property. It will completely remove this property for good. Thereafter, you will never be able to add back this property to the said input. In other words, if you enable the input by removing its disabled property using removeProp() function, you will not be able to disable it again later.

Conclusion

In this article, we have learnt how to disable and enable HTML input for elements. We have covered many different use cases such as disabling/enabling single element, multiple elements, in event handlers and so on. We have also learnt how to disable/enable HTML inputs using plain JavaScript. You can use any of them as per your requirement. In fact, you can also use them to add/remove checked property of checkboxes and radio buttons. Depending on your jQuery version, it is recommended to use prop() or attr() function. They are very easy to use, and automatically handle single as well as multiple inputs.

FAQ

1. Can we use either of prop() or attr() function to disable/enable input?

If you use jQuery 1.6+, you can use prop() function, else you can use attr() function.

2. Can we use these methods on all inputs?

Yes. You can use these solutions on all HTML inputs, across all web browsers.

Also read:

Does Python Have Ternary Operator?
How to Disable Resizable Property of Textarea?
How to Change Element’s Class in JavaScript