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

Posted 2023-02-22

【中文标题】如何使用 jQuery 删除“禁用”属性？

【英文标题】：How to remove "disabled" attribute using jQuery?

【发布时间】：2012-11-17 13:40:45

【问题描述】：

我必须先禁用输入，然后单击链接以启用它们。

这是我迄今为止尝试过的，但它不起作用。

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

【问题讨论】：

我没有看到你的问题。你在问什么？

那么问题是什么？我的意思是你面临什么问题

使用 prop() - .prop('disabled', false)

如果您的问题解决了，请勾选已接受的（真实）答案，让其他人知道...

问题是clic后没有禁用

【参考方案1】：

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

在你的情况下，它会是：

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

jsFiddle example here.

---

既然可以使用attr()/removeAttr() 来执行此操作，为什么还要使用prop()？

基本上，在获取或设置属性时应该使用prop()（例如autoplay、checked、disabled和required等等）。

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

虽然您想做的事情可以使用attr()/removeAttr() 完成，但这并不意味着它应该完成（并且可能会导致奇怪/有问题的行为，如本例）。

以下摘录（摘自jQuery documentation for prop()）更详细地解释了这些要点：

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

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

【讨论】：

人们还应该知道脏检查标志，它完全破坏了attr 与prop 的复选框：w3.org/TR/html5/forms.html#concept-input-checked-dirty 除了内部 jQuery 变通魔术。

嗯，.prop("disabled", false) 在按钮中似乎对我不起作用——标签中的 'disabled' 属性没有任何值。

@UpTheCreek 也不适合我。但是我发现'this'子句（像往常一样）是一个范围问题。在特定情况下，.prop() 在this (this.prop("disabled", false) 指向的元素上执行，但进入回调它绑定到错误的元素，所以我不得不做常见的var that = this 解决方法。尝试玩使用.apply()/.call() 无法正常工作；我不知道为什么。在调用this.prop(...) 之前仔细检查console.log(this) 是否设置为您想要的对象，然后再调用this.prop(...)

我提名这个答案作为转换到文档部分的候选者。清晰，完整，写得很好。

通过使用 removeAttr()，您完全删除了 disabled 属性本身 - 而 prop() 只是将属性的底层布尔值设置为 false。 我不相信这是真的。在 HTML 中，仅存在 disabled 属性就会禁用该元素。例如，拥有<button disabled="false"></button> 将不会启用按钮，必须删除该属性。通过调用$('button').prop('disabled', false); jQuery 将为您删除该属性，正如我在this codepen 中观察到的那样（检查以查看属性删除）。

【参考方案2】：

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

【参考方案3】：

这样使用，

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

【讨论】：

这个实际上对我有用。 prop('disabled', false) 出人意料地不起作用。

@Stefan 同样的事情！你找到原因了吗？

我知道这是一个古老的线程，但如果有人仍然为此苦苦挣扎，我的问题是该元素是 <a>，.prop('disabled', false) 在其上不起作用。我将其更改为<button>，现在可以使用了

【参考方案4】：

我认为您正在尝试切换禁用状态，以防万一您应该使用它（来自this question）：

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

Here is a working fiddle.

【参考方案5】：

认为你可以轻松设置

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

【参考方案6】：

删除禁用的属性使用，

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

并添加禁用属性使用，

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

享受:)

【参考方案7】：

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

element.removeProp('disabled')

注意是removeProp 而不是removeAttr。

我在这里使用jQuery 2.1.3。

【讨论】：

来自 jQuery 文档：重要提示：不应使用 .removeProp() 方法将这些属性设置为 false。移除原生属性后，将无法再次添加。有关详细信息，请参阅 .removeProp()。

【参考方案8】：

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

elem.removeAttribute('disabled');

【参考方案9】：

2018，没有 JQuery

​​>

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

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

【参考方案10】：

用于删除禁用的属性

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

用于添加禁用的属性

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

【讨论】：

这个答案之前已经给出了，但仍然是错误的。您将属性称为“属性”，这令人困惑。

【参考方案11】：

尝试特殊选择器：

不工作：$('#ID_Unit').removeAttr("disabled"); 作品：$('select[id=ID_Unit]:disabled').removeAttr("disabled");

所有“选择”控件$('select:disabled').removeAttr("disabled");

“select”是控件类型，如“type”等。