How to remove "disabled" attribute using jQuery?
JavascriptJqueryDisabled InputJavascript Problem Overview
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'));
});
Javascript Solutions
Solution 1 - Javascript
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.
});
> 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).
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, 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
."
Solution 2 - Javascript
to remove disabled attribute use,
$("#elementID").removeAttr('disabled');
and to add disabled attribute use,
$("#elementID").prop("disabled", true);
Enjoy :)
Solution 3 - Javascript
<input type="text" disabled="disabled" class="inputDisabled" value="">
<button id="edit">Edit</button>
$("#edit").click(function(event){
event.preventDefault();
$('.inputDisabled').removeAttr("disabled")
});
Solution 4 - Javascript
Use like this,
HTML:
<input type="text" disabled="disabled" class="inputDisabled" value="">
<div id="edit">edit</div>
JS:
$('#edit').click(function(){ // click to
$('.inputDisabled').attr('disabled',false); // removing disabled in this class
});
Solution 5 - Javascript
I think you are trying to toggle the disabled state, in witch case you should use this (from this question):
$(".inputDisabled").prop('disabled', function (_, val) { return ! val; });
Solution 6 - Javascript
for removing the disabled properties
$('#inputDisabled').removeAttr('Disabled');
for adding the disabled properties
$('#inputDisabled').attr('disabled', 'disabled' );
Solution 7 - Javascript
2018, without JQuery
I know the question is about JQuery: this answer is just FYI.
document.getElementById('edit').addEventListener(event => {
event.preventDefault();
[...document.querySelectorAll('.inputDisabled')].map(e => e.disabled = false);
});
Solution 8 - Javascript
Thought this you can easily setup
$(function(){
$("input[name^=radio_share]").click
(
function()
{
if($(this).attr("id")=="radio_share_dependent")
{
$(".share_dependent_block input, .share_dependent_block select").prop("disabled",false);
}
else
{
$(".share_dependent_block input, .share_dependent_block select").prop("disabled",true);
}
}
);
});
Solution 9 - Javascript
This was the only code that worked for me:
element.removeProp('disabled')
Note that it's removeProp
and not removeAttr
.
I'm using jQuery 2.1.3
here.
Solution 10 - Javascript
This question specifically mentions jQuery, but if you are looking to accomplish this without jQuery, the equivalent in vanilla JavaScript is:
elem.removeAttribute('disabled');
Solution 11 - Javascript
Try special selector:
Not working : $('#ID_Unit').removeAttr("disabled");
Works : $('select[id=ID_Unit]:disabled').removeAttr("disabled");
all "select" controls $('select:disabled').removeAttr("disabled");
"select" is control type like "type" etc.