How to Remove "Disabled" Attribute Using Jquery

How to remove disabled attribute using jQuery?

Always use the prop() method to enable or disable elements when using jQuery (see below for why).

In your case, it would be:

$("#edit").click(function(event){
   event.preventDefault();
   $('.inputDisabled').prop("disabled", false); // Element(s) are now enabled.
});

jsFiddle example here.

---

Why use prop() when you could use attr()/removeAttr() to do this?

Basically, prop() should be used when getting or setting properties (such as autoplay, checked, disabled and required amongst others).

While what you want to do can technically be done using attr()/removeAttr(), it doesn't mean it should be done - and can cause strange/problematic behaviour, as in this case.

"The difference between attributes and properties can be important in
specific situations. Before jQuery 1.6, the .attr() method sometimes
took property values into account when retrieving some attributes,
which could cause inconsistent behavior. As of jQuery 1.6, the .prop()
method provides a way to explicitly retrieve property values, while
.attr() retrieves attributes."

"Properties generally affect the dynamic state of a DOM element without
changing the serialized HTML attribute. Examples include the value
property of input elements, the disabled property of inputs and
buttons, or the checked property of a checkbox. The .prop() method
should be used to set disabled and checked instead of the .attr()
method. The .val() method should be used for getting and setting
value." - jQuery documentation for prop()

Pre-jQuery 3.0 (before 2016)

The reason why you should use prop over removeAttr() is that removeAttr() completely removes the disabled attribute itself - as this method would simply set the corresponding property name to false:

Prior to jQuery 3.0, using .removeAttr() on a boolean attribute such
as checked, selected, or readonly would also set the corresponding
named property to false. This behavior was required for ancient
versions of Internet Explorer but is not correct for modern browsers
because the attribute represents the initial value and the property
represents the current (dynamic) value. - jQuery 3.0 Breaking Changes

While prop() merely sets the property's underlying boolean value to false.

How to remove disable element using JQUERY?

If you want to remove disable attribute:-

$('input').each(function(){  if($(this).prop("disabled")){    $(this).prop("disabled", false);  }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input type="text" name="textinput-hide" id="textinput1" placeholder="Text input1" value="" disabled><br><br>
<input type="text" name="textinput-hide" id="textinput2" placeholder="Text input2" value="">

Using jQuery how can we remove disabled attribute from all elements whose value is false?

Why don't you just match elements where disabled is false?

$('[disabled="false"]​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​')​.removeAttr('disabled');​​​

Demo: http://jsfiddle.net/ASN29/

The presence of the disabled attribute automatically makes the element disabled, regardless of the attribute's value, so this isn't a very good idea. How does the HTML become this way?

How to remove disable attribute for class selectpicker using jQuery

Try this:

$("#xyz").attr('disabled',true);

$('#xyz').selectpicker('refresh');

You should refresh the selectpicker after any updates in it.

Jquery add and remove disable attribute

You have several issues.

• You should use the change event when dealing with checkboxes so that people who navigate with the keyboard can use them.
• You should provide an anonymous function to the event handler. You current code is immediately executing the enable_cb() function and then ignoring any further events.
• The checkbox parameter passed to the function is a jQuery object which has no checked property. You should use is(':checked') instead.
• You should use prop() over attr() and removeAttr() where possible.

Try this:

$(function() {
    enable_cb(c1, f1);
    enable_cb(c2, f2);
    enable_cb(c3, f3);

    c1.change(function() {
        enable_cb(c1, f1)
    });
    c2.change(function() {
        enable_cb(c2, f2)
    });
    c3.change(function() {
        enable_cb(c3, f3)
    });
});

function enable_cb(checkbox, field) {
    if (checkbox.is(':checked')) {
        console.log('if');
        field.prop("disabled", false);
    } else {
        console.log('else');
        field.prop("disabled", true);
    }
}

Working example

That said, you should really look to DRY up your code to reduce repetition. Exactly how you do this depends on your HTML structure, but here's an example.

<div class="checkbox-group">
    <input type="checkbox" id="check" />
    <input type="text" id="subcomplex"/>
</div>
<div class="checkbox-group">
    <input type="checkbox" id="yearlymanagermaintainancedayscheck" />
    <input type="text" id="yearlymanagermaintainancedays" />
</div>
<div class="checkbox-group">
    <input type="checkbox" id="yearlysuppliermaintainancedayscheck" />
    <input type="text" id="yearlysuppliermaintainancedays" />
</div>

$('.checkbox-group :checkbox').change(function() {
    $(this).siblings('input').prop('disabled', !this.checked);
}).change();

Working example

Note how much simpler the code is for the latter version, and how the JS will require no updates or maintenance no matter how many input elements you add to the HTML.

---

Related Topics