使用jQuery的prop()切换禁用属性无效。

Question

首先，这个 fiddle。

$('#enableButtonB').click(function (e) {
   if($(e.target).is(':checked'))
   {
       $('#myButtonB').removeProp('disabled');
       alert('Enable Button B');
   }
   else
   {
       $('#myButtonB').prop('disabled', true); 
       alert('Disable Button B');
   }
});

我正在尝试使用jQuery的.prop()和removeProp()方法根据一些条件启用和禁用按钮。在调用removeProp()之后，似乎一切都正常运作，但随后对prop()的任何后续调用都无法禁用该按钮。

重复启用和禁用元素的正确方法是什么？

- Jason Towne

---

如果你想禁用某个元素，可以使用$('element').prop('disabled', true)，如果你想启用它，则使用$('element').prop('disabled', false)。请注意，true表示禁用，false表示启用。 - Ohgodwhy

你提供的示例在我使用的 FF12 浏览器上可以正常运行。 - js1568

jQuery文档很好，http://api.jquery.com/removeProp/上说：“注意：不要使用此方法来删除诸如checked、disabled或selected之类的内置属性。 这将完全删除该属性，一旦删除，就无法再次添加到元素中。 相反，使用.prop()将这些属性设置为false。” - iambriansreed

@JasonTowne请查看我的答案中的fiddle。将“prop”缩减为布尔值可以更轻松地设置。 - iambriansreed

@iambriansreed 是的，这也是我在实际编码中可能会做的。我想尽可能保持相同的小提琴图表简单，以使其更易于阅读/理解。不过你的例子很棒。我已经给你点赞了。 - Jason Towne

Answer 1

与其

.removeProp('disabled')

使用

.prop('disabled',false)

Fiddle：http://jsfiddle.net/kqnZz/6/

- Blazemonger

---

@iambriansreed 这个例子本来就不恰当。 - Blazemonger

那些是故意留下的，@iambriansreed。但如果你坚持的话：http://jsfiddle.net/kqnZz/8/ - Blazemonger

我偶然遇到这个问题/答案，当我在寻找其他东西时（我发现它有点旧），但是解释为什么需要进行此更改将会很有帮助。从jQuery的文档（https://api.jquery.com/removeProp/）中可以看到，“注意：不要使用此方法删除诸如checked、disabled或selected之类的本机属性。这将完全删除该属性，并且一旦删除，就无法再次添加到元素中。相反，请使用.prop()将这些属性设置为false。” - MandM

Answer 2

首先，http://jsfiddle.net/iambriansreed/KxGVa/

jQuery文档很好。 removeProp说：

注意：不要使用此方法删除诸如checked、disabled或selected之类的本地属性。这将完全删除该属性，并且一旦删除，就无法再次添加到元素中。而是应使用.prop()将这些属性设置为false。

更改：

.removeProp('disabled')

...到...

.prop('disabled', false)

...并且...

.prop('disabled', 'disabled')

...到...

.prop('disabled', true)

- iambriansreed

Answer 3

尝试一下这个简短的函数是否满足您的需求：

$("#enableButtonB").click(function(){
  $("#myButtonB").prop('disabled', function (_, val) { return ! val; });
});

感谢用户Explosion Pills提供的这个棒极了的函数 :)

- Unibyte

Answer 4

这行代码将作为切换禁用功能：

$('#myButtonB').prop('disabled', !$('#myButtonB').prop('disabled'));

如果您在 jQuery 函数内使用它，可以像这样使用：

$('#enableButtonB').on('click', function() {
     $('#myButtonB').prop('disabled', !$('#myButtonB').prop('disabled'));
});

- josecash