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

Question

我必须首先禁用输入框，然后在点击链接后启用它们。

这是我目前尝试过的代码，但它并不起作用。

HTML:

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

jQuery：

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

这向我展示了true，然后是false，但输入没有任何改变：

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

- fatiDev

---

我不明白你的问题。你在问什么？ - nicosantangelo

使用prop()方法- .prop('disabled', false)。 - Jay Blanchard

如果您的问题已经解决，请勾选已接受（真正）的答案，以便其他人了解... - Dhamu

问题在于它在点击后没有被禁用。 - fatiDev

我尝试了所有的建议，问题仍然存在。 - fatiDev

Answer 1

在使用jQuery时，始终使用prop()方法来启用或禁用元素（请参见下面的原因）。

针对您的情况，可以这样写：

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

点击这里查看 jsFiddle 示例。

---

为什么可以使用 attr()/removeAttr() 完成相同的操作，却更应该使用 prop()？

基本上，当获取或设置属性(如 autoplay, checked, disabled 和 required 等)时，应该使用 prop()。

虽然从技术上讲，也可以使用 attr()/removeAttr() 实现所需的操作，但并不意味着它们一定要用 - 在某些情况下会导致奇怪/问题行为，就像在此处一样。

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

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

在 jQuery 3.0 之前 (2016 年之前)

使用 prop 而非 removeAttr() 的原因在于，removeAttr() 完全删除了特征本身，因为该方法仅将对应的属性名设置为 false:

在 jQuery 3.0 之前，对于诸如 checked、selected 或 readonly 等布尔型特征，使用 .removeAttr() 还会将相应的命名属性设置为 false。这种行为对于古老的 Internet Explorer 版本是必需的，但对于现代浏览器来说并不正确，因为特征表示初始值，属性则表示当前(动态)值。 - jQuery 3.0 Breaking Changes

而 prop() 只是将属性的基础布尔值设置为 false。

- dsgriffin

---

人们也应该知道脏选中标志，它完全破坏了复选框的 attr vs prop：http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty，除了内部 jQuery 解决方法。 - Ciro Santilli OurBigBook.com

在按钮中，.prop("disabled", false) 似乎对我无效 - 它会将标签中的 'disabled' 属性保留，但不设置值。 - UpTheCreek

@UpTheCreek 对我也不起作用。但我发现这是“this”限定词的作用域问题（像往常一样）。在具体情况下，.prop（）在由this指向的元素上执行（this.prop（“disabled”，false）），但由于在回调中绑定到了错误的元素，所以我不得不使用常见的“var that=this”的解决方法。 尝试使用.apply()/.call()来进行操作并没有很好地工作；我不知道为什么。 在调用this.prop（...）之前，请使用console.log(this)双重检查它是否设置为所需的对象。 - Kamafeather

我提名这篇答案作为转换成文档部分的候选项。清晰、完整、写得很好。 - Anne Gunn

使用removeAttr()会完全删除disabled属性本身，而prop()只是将属性的基础布尔值设置为false。我不认为这是正确的。在HTML中，仅仅存在disabled属性就会禁用元素。例如，有一个<button disabled="false"></button>并不会启用按钮，必须删除该属性。通过调用$('button').prop('disabled', false);，jQuery将为您删除该属性，如我在[this codepen] (https://codepen.io/anon/pen/aMJELv)中观察到的（检查以查看属性的删除）。 - Naftali

Answer 2

要移除禁用属性，请使用以下方法：

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

并添加禁用属性，使用以下代码：

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

祝您愉快 :)

- Umesh Patil

Answer 3

<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/

- Muthu Kumaran

Answer 4

像这样使用，

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

- Dhamu

---

这个对我来说实际上是有效的。出人意料地，prop('disabled', false)没有起作用。 - Stefan

@Stefan 同在这里！你找出原因了吗？ - Alexander Suraphel

我知道这是一个古老的线程，但如果有人仍然在努力解决这个问题，我的问题是元素是一个<a>，在它上面使用.prop('disabled', false)不起作用。我将其更改为<button>，现在它可以工作了。 - Oliver Nagy

Answer 5

我认为你正在尝试切换禁用状态，这种情况下你应该使用以下代码（来自this question）：

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

这里是一个可运行的 fiddle。

- nicosantangelo

Answer 6

用于删除已禁用属性的方法

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

添加禁用属性

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

- Mosam Prajapati

---

那个答案之前已经给出过了，但仍然是错误的。你把属性称为“属性”，这很令人困惑。 - Auspex

Answer 7

2018年，不使用jQuery

我知道这个问题是关于jQuery的：这个答案只是提供信息。

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

- rap-2-h

Answer 8

这是唯一能够为我正常工作的代码：

element.removeProp('disabled')

请注意，应该使用removeProp而不是removeAttr。

这里我正在使用jQuery 2.1.3。

- Leniel Maccaferri

---

重要提示：不应使用 .removeProp() 方法将这些属性设置为 false。一旦删除了本机属性，就无法再次添加。有关更多信息，请参见 .removeProp()。 - XanatosLightfiren

Answer 9

通过这个，你可以轻松设置。

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

- Er.gaurav soni

Answer 10

这个问题特别提到了jQuery，但如果你想在没有jQuery的情况下完成这个任务，使用原生JavaScript的等效方法是：

elem.removeAttribute('disabled');

- jdgregson