Javascript 如何使用 jQuery 删除“禁用”属性？

How to remove "disabled" attribute using jQuery?

提问by fatiDev

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:

HTML：

<input type="text" disabled="disabled" class="inputDisabled" value="">

jQuery:

jQuery：

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

This shows me trueand then falsebut nothing changes for the inputs:

这显示了我true，然后false输入没有任何变化：

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

回答by dsgriffin

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

prop()使用 jQuery 时始终使用方法来启用或禁用元素（原因见下文）。

In your case, it would be:

在您的情况下，它将是：

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

jsFiddle example here.

jsFiddle 示例在这里。

---

---

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

为什么prop()在可以使用attr()/removeAttr()来执行此操作时使用？

Basically, prop()should be used when getting or setting properties(such as autoplay, checked, disabledand requiredamongst others).

基本上，prop()应该获取或设置时，可使用特性（如autoplay，checked，disabled和required在其他之中）。

By using removeAttr(), you are completely removing the disabledattribute itself - while prop()is merely setting the property's underlying boolean value to false.

通过使用removeAttr()，您将完全删除disabled属性本身 - 而prop()只是将属性的基础布尔值设置为 false。

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

虽然您可以使用attr()/完成您想要做的事情removeAttr()，但这并不意味着它应该完成（并且可能会导致奇怪/有问题的行为，就像在这种情况下一样）。

The following extracts (taken from the jQuery documentation for prop()) explain these points in greater detail:

以下摘录（取自prop()的jQuery 文档）更详细地解释了这些要点：

"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 valueproperty of input elements, the disabledproperty of inputs and buttons, or the checkedproperty of a checkbox. The .prop()method should be used to set disabledand checkedinstead of the .attr()method. The .val()method should be used for getting and setting value."

“属性和属性之间的区别在特定情况下可能很重要。在 jQuery 1.6 之前，该.attr()方法在检索某些属性时有时会考虑属性值，这可能会导致不一致的行为。从 jQuery 1.6 开始，该.prop()方法提供了一种显式检索的方法属性值，同时 .attr()检索属性。”

“属性通常会影响 DOM 元素的动态状态，而不更改序列化的 HTML 属性。示例包括value输入元素的disabled属性、输入和按钮的checked属性或复选框的属性。该.prop()方法应该用于设置disabled和checked而不是该.attr()方法的.val()，应使用方法用于获取和设置 value“。

回答by Umesh Patil

to remove disabled attribute use,

删除禁用属性的使用，

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

and to add disabled attribute use,

并添加禁用属性使用，

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

Enjoy :)

享受 ：）

回答by 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/

http://jsfiddle.net/ZwHfY/

回答by Dhamu

Use like this,

像这样使用，

HTML:

HTML：

<input type="text" disabled="disabled" class="inputDisabled" value="">

<div id="edit">edit</div>

JS:

JS：

 $('#edit').click(function(){ // click to
            $('.inputDisabled').attr('disabled',false); // removing disabled in this class
 });

回答by nicosantangelo

I think you are trying to togglethe disabled state, in witch case you should use this (from this question):

我认为您正在尝试切换禁用状态，在巫术情况下您应该使用它（来自这个问题）：

$(".inputDisabled").prop('disabled', function (_, val) { return ! val; });

Here is a working fiddle.

这是一个工作小提琴。

回答by 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);   
        }
    }
 );
});

回答by Leniel Maccaferri

This was the only code that worked for me:

这是唯一对我有用的代码：

element.removeProp('disabled')

Note that it's removePropand not removeAttr.

请注意，它是removeProp而不是removeAttr。

I'm using jQuery 2.1.3here.

我jQuery 2.1.3这里用。

回答by rap-2-h

2018, without JQuery

2018 年，没有 JQuery

I know the question is about JQuery: this answer is just FYI.

我知道问题是关于 JQuery：这个答案仅供参考。

document.getElementById('edit').addEventListener(event => {
    event.preventDefault();
    [...document.querySelectorAll('.inputDisabled')].map(e => e.disabled = false);
}); 

回答by jdgregson

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

这个问题特别提到了 jQuery，但如果你想在没有 jQuery 的情况下完成这个，vanilla JavaScript 中的等价物是：

elem.removeAttribute('disabled');