ChatGPT解决这个技术问题 Extra ChatGPT

How to remove "disabled" attribute using jQuery?

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'));
});
I don't see your problem. What are you asking?
So what is the question? i mean what problem you are facing
Use prop() - .prop('disabled', false)
If your problem solved, please tick the accepted (Real) answer for other to know...
the problem is that it is not disabled after the clic

d
dsgriffin

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).

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."


People should also know abut the dirty checkedness flag, which completely breaks attr vs prop for checkboxes: w3.org/TR/html5/forms.html#concept-input-checked-dirty except for internal jQuery workaround magic.
Hmm, .prop("disabled", false) doesn't seem to work for me in a button - leaves the 'disabled' attribute in the tag with no value.
@UpTheCreek was not working for me too. But I discovered to be a scope problem with the 'this' clause (as usual). In the specific case .prop() was executed on the element pointed by this (this.prop("disabled", false), but being into a callback it was binding to the wrong element, so I had to do the common var that = this workaround. Trying to play with .apply()/.call() was not working well; I don't know why. Double check with a console.log(this) if it is set to your desired object, just before calling this.prop(...)
I nominate this answer as a candidate for conversion over to the document section. Clear, complete, well-written.
By using removeAttr(), you are completely removing the disabled attribute itself - while prop() is merely setting the property's underlying boolean value to false. I don't believe this to be true. In HTML, the mere presence of the disabled property will disable the element. For example, having a <button disabled="false"></button> will not enable the button, the property must be removed. By calling $('button').prop('disabled', false); jQuery will remove the property for you, as I observed in this codepen (inspect to see the property removal).
U
Umesh Patil

to remove disabled attribute use,

 $("#elementID").removeAttr('disabled');

and to add disabled attribute use,

$("#elementID").prop("disabled", true);

Enjoy :)


M
Muthu Kumaran
<input type="text" disabled="disabled" class="inputDisabled" value="">
​<button id="edit">Edit</button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

$("#edit").click(function(event){
    event.preventDefault();
    $('.inputDisabled').removeAttr("disabled")
});​

http://jsfiddle.net/ZwHfY/


D
Dhamu

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
 });

This one is actually working for me. The prop('disabled', false) surprisingly didn't work.
@Stefan same thing here! Did you find out why?
I know this is an ancient thread but if someone still struggles with this, my issue was that the element was an <a>, on which .prop('disabled', false) doesn't work. I changed it to a <button> and it works now
C
Community

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; });

Here is a working fiddle.


M
Mosam Prajapati

for removing the disabled properties

 $('#inputDisabled').removeAttr('Disabled');

for adding the disabled properties

 $('#inputDisabled').attr('disabled', 'disabled' );

That answer has been given previously, but it's still wrong. You're calling attributes "properties", which is confusing.
r
rap-2-h

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);
}); 

E
Er.gaurav soni

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);   
        }
    }
 );
});

L
Leniel Maccaferri

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.


From jQuery documentation: Important: the .removeProp() method should not be used to set these properties to false. Once a native property is removed, it cannot be added again. See .removeProp() for more information.
j
jdgregson

This question specifically mentions jQuery, but if you are looking to accomplish this without jQuery, the equivalent in vanilla JavaScript is:

elem.removeAttribute('disabled');

M
Milan Hettner

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.