Set Disabled Property to True Using jQuery

This guide explains how to dynamically disable HTML elements, such as buttons and input fields, using jQuery. You will learn the modern standard method using the .prop() function, how to re-enable elements when needed, and why this approach is preferred over legacy alternatives like .attr().

The Modern Approach: Using .prop()

Starting with jQuery 1.6, the recommended method for modifying boolean attributes and DOM properties is .prop(). Properties like disabled, checked, and readonly represent the dynamic state of an element rather than a static HTML attribute.

To set the disabled property to true, select the target element and pass 'disabled' and true as arguments:

// Disable a button by its ID
$('#submit-button').prop('disabled', true);

Re-enabling the Element

To enable the element again, simply set the property to false:

// Enable the button
$('#submit-button').prop('disabled', false);

Disabling Multiple Elements at Once

jQuery allows you to apply changes to multiple elements simultaneously using class selectors or element types:

// Disable all input fields within a specific form
$('#my-form input').prop('disabled', true);

// Disable all buttons with the class .action-btn
$('.action-btn').prop('disabled', true);

Why Avoid .attr()?

In earlier versions of jQuery, developers used .attr('disabled', 'disabled') or .removeAttr('disabled'). While this can still work in some browsers, it modifies the HTML attribute rather than the actual DOM property. Using .prop() is faster, standard-compliant, and prevents unexpected behavior when reading or writing interactive element states.

Checking the Disabled State

To check whether an element is currently disabled, you can either read the property value or use the :disabled selector:

// Method 1: Using .prop()
if ($('#submit-button').prop('disabled')) {
    console.log('The button is disabled.');
}

// Method 2: Using .is()
if ($('#submit-button').is(':disabled')) {
    console.log('The button is disabled.');
}