I have to disable inputs at first and then on click of a link to enable them.
This is what I have tried so far, but it doesn't work.
HTML:
<input type="text" disabled="disabled" class="inputDisabled" value="">
jQuery:
$("#edit").click(function(event){ event.preventDefault(); $('.inputDisabled').removeAttr("disabled") });
This shows me true
and then false
but nothing changes for the inputs:
$("#edit").click(function(event){ alert(''); event.preventDefault(); alert($('.inputDisabled').attr('disabled')); $('.inputDisabled').removeAttr("disabled"); alert($('.inputDisabled').attr('disabled')); });
To remove disabled attribute using jQuery, use the removeAttr() method. You need to first remove the property using the prop() method. It will set the underlying Boolean value to false.
The removeAttr() method is an inbuilt method in jQuery which is used to remove one or more attributes from the selected elements. Syntax: $(selector).removeAttr(attribute) Parameters: This function accepts single parameter attribute which is mandatory. It is used to specify one or more attributes to remove.
The disable/enable an input element in jQuery can be done by using prop() method. The prop() method is used to set or return properties and values for the selected elements. Example 1: This example uses prop() method to disable the input text field.
jQuery prop() Method The prop() method sets or returns properties and values of the selected elements. When this method is used to return the property value, it returns the value of the FIRST matched element.
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 useattr()
/removeAttr()
to do this?
Basically, prop()
should be used when getting or setting properties (such as autoplay
, checked
, disabled
and required
amongst others).
By using removeAttr()
, you are completely removing the disabled
attribute itself - while prop()
is merely setting the property's underlying boolean value to false.
While what you want to do can be done using attr()
/removeAttr()
, it doesn't mean it should be done (and can cause strange/problematic behaviour, as in this case).
The following extracts (taken from the jQuery documentation for prop()) explain these points in greater detail:
"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, thedisabled
property of inputs and buttons, or thechecked
property of a checkbox. The.prop()
method should be used to setdisabled
andchecked
instead of the.attr()
method. The.val()
method should be used for getting and settingvalue
."
to remove disabled attribute use,
$("#elementID").removeAttr('disabled');
and to add disabled attribute use,
$("#elementID").prop("disabled", true);
Enjoy :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With