How to remove " disabled " attribute using jQuery?

In jQuery, there are several ways to remove the 'disabled' attribute from an element. Below are some common methods with examples.

Method 1: Using .removeAttr()

The most straightforward approach is to use the .removeAttr() method to remove the 'disabled' attribute from an element. This method guarantees complete removal of the attribute.

javascript
// Assuming we have a button with ID 'submitButton'
$('#submitButton').removeAttr('disabled');

Method 2: Using .prop()

Another common technique is to use the .prop() method. By setting the property value to false, you can effectively enable the element by removing the disabled state.

javascript
// Similarly, for a button with ID 'submitButton'
$('#submitButton').prop('disabled', false);

Practical Application Example

Suppose we have a form where, after submission, we want to re-enable the submit button to allow users to correct and resubmit the form. This can be achieved by listening for the form's submit event and removing the 'disabled' attribute from the button:

html
<form id="myForm">
  <input type="text" id="username" required>
  <input type="password" id="password" required>
  <button type="submit" id="submitButton" disabled>Submit</button>
</form>

javascript
$(document).ready(function() {
    $('#myForm').on('submit', function(e) {
        e.preventDefault(); // Prevent default form submission

        // Perform validation or asynchronous operations

        // Re-enable the submit button
        $('#submitButton').removeAttr('disabled');
        
        // Alternatively, use the .prop() method
        // $('#submitButton').prop('disabled', false);
    });
});

In this example, when the form is submitted, we first prevent the default submission behavior. Then, we execute necessary operations (such as data validation or sending data to the server). Finally, we remove or modify the 'disabled' attribute to re-enable the submit button, allowing users to resubmit the form.