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

IT技术 javascript jquery disabled-input
2021-01-16 01:23:10

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

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

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'));
});
6个回答

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

在您的情况下，它将是：

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

jsFiddle 示例在这里。

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

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

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

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

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

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

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

我提名这个答案作为转换到文档部分的候选人。清晰，完整，写得很好。
2021-03-14 01:23:10
人们也应该知道紧靠脏checkedness标志，它完全断裂attrVSprop的复选框：w3.org/TR/html5/forms.html#concept-input-checked-dirty除了内部jQuery的解决办法魔法。
2021-03-25 01:23:10
嗯， .prop("disabled", false) 在按钮中似乎对我不起作用 - 标签中的 'disabled' 属性没有任何值。
2021-03-27 01:23:10
通过使用 removeAttr()，您将完全删除禁用属性本身——而 prop() 只是将属性的底层布尔值设置为 false。 我不相信这是真的。在 HTML 中，仅仅存在disabled属性就会禁用元素。例如，有一个<button disabled="false"></button> 不会启用按钮，必须删除该属性。通过调用$('button').prop('disabled', false);jQuery 将为您删除属性，正如我在此代码笔中所观察到的（检查以查看属性删除）。
2021-03-30 01:23:10
@UpTheCreek 也不适合我。但是我发现“this”子句的范围问题（像往常一样）。在特定情况下.prop()是在this(指向的元素上执行的this.prop("disabled", false)，但是进入回调它绑定到错误的元素，所以我不得不做常见的var that = this解决方法。尝试使用.apply()/.call()效果不佳；我不知道为什么。console.log(this)在调用之前仔细检查它是否设置为您想要的对象this.prop(...)
2021-04-09 01:23:10

删除禁用属性的使用，

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

并添加禁用属性使用，

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

享受 ：）

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

像这样使用，

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
 });
我知道这是一个古老的线程，但如果有人仍然为此而苦苦挣扎，我的问题是元素是 an <a>，它.prop('disabled', false)不起作用。我把它改成了 a<button>现在可以用了
2021-03-14 01:23:10
这个实际上对我有用。prop('disabled', false) 令人惊讶地不起作用。
2021-03-17 01:23:10
@Stefan 同样的事情！你找出原因了吗？
2021-04-11 01:23:10

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

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

这是一个工作小提琴。

其它你可能感兴趣的问题
上一篇javascript: 暂停 setTimeout(); 下一篇如何使用 JavaScript 替换字符串中的所有点