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

Answer 1

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".

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

删除禁用的属性使用,

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

并添加禁用的属性使用,

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

请享用 :)

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

Answer 5

我想你正试图切换禁用状态,在这种情况下你应该使用它(来自这个问题):

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

这是一个工作小提琴.

Answer 6

用于删除禁用的属性

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

用于添加禁用的属性

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

Answer 7

2018 年，没有 JQuery

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

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