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

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

Answer 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。”

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

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

Answer 4

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

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

Here is a working fiddle.

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

Answer 6

删除禁用的属性使用，

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

并添加禁用属性使用，

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

享受:)

Answer 7

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

element.removeProp('disabled')

注意是removeProp 而不是removeAttr。

我在这里使用jQuery 2.1.3。

Answer 8

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

elem.removeAttribute('disabled');

Answer 9

2018，没有 JQuery

​​>

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

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

Answer 10

用于删除禁用的属性

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

用于添加禁用的属性

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

Answer 11

尝试特殊选择器：

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

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

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