Disabling and Enabling Input Fields with jQuery

When working with HTML form elements, it's often necessary to disable or enable certain input fields for user interaction. jQuery provides several methods to accomplish these tasks.

Disabling an Input Field

The preferred method for disabling an input field in jQuery versions 1.6 and above is through the prop() function:

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

Prior to jQuery 1.6, the attr() function can be used to set the disabled attribute:

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

Enabling an Input Field

To enable a disabled input field, you should reverse the action depending on the method used:

jQuery 1.6

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

jQuery 1.5 and below

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

Direct DOM Manipulation

In any version of jQuery, you can always directly manipulate the DOM element:

// Assuming an event handler thus 'this'
this.disabled = true;
// ...
this.disabled = false;

Note for jQuery 1.6

While jQuery 1.6 introduces the removeProp() method, it should not be used for native properties like disabled. Instead, always use .prop() to toggle the property to false.