使用jQuery切换输入禁用属性

Question

这是我的代码：

$("#product1 :checkbox").click(function(){
    $(this)
        .closest('tr') // Find the parent row.
            .find(":input[type='text']") // Find text elements in that row.
                .attr('disabled',false).toggleClass('disabled') // Enable them.
                .end() // Go back to the row.
            .siblings() // Get its siblings
                .find(":input[type='text']") // Find text elements in those rows.
                .attr('disabled',true).removeClass('disabled'); // Disable them.
});

如何切换 .attr('disabled'，false);？

我在谷歌上找不到相关信息。

- Tommy Arnold

---

你为什么不能使用字段的disabled属性呢？$("input").get(0).disabled = isFalse; // http://jsfiddle.net/uAfhj/ - Shanimal

我找到了DependsOn插件，你可能会觉得它很有用。 - Onshop

Answer 1

$('#el').prop('disabled', (i, v) => !v);

方法 .prop() 获取匹配元素集合中第一个元素的属性值。

参数

• 属性 name（例如 disabled、checked、selected）可以是 true 或 false 的任何内容。
• 属性 value，可以是：
  • (empty) 返回当前值。
  • boolean 设置属性值。
• function 对每个匹配的元素调用，返回值用于设置属性。传递了两个参数；第一个参数是索引（数字，从 0 开始，每找到一个元素增加）。第二个参数是元素的当前值（true/false）。

在这种情况下，我使用了一个函数，它给我提供了索引（i）和当前值（v），然后我返回了当前值的相反值，以便翻转属性状态。

额外信息 .prop()方法仅获取匹配集中的第一个元素的属性值。对于尚未设置的属性值，它返回undefined，或者如果匹配集中没有元素，则返回undefined。要获取每个元素的值，请使用循环结构，如jQuery的.each()或.map()方法。

属性与特性

在特定情况下，属性和特性之间的区别可能非常重要。在jQuery 1.6之前，.attr()方法有时会在检索某些属性时考虑到属性值，这可能导致不一致的行为。从jQuery 1.6开始，.prop()方法提供了一种明确检索属性值的方式，而.attr()则用于检索特性。

- Arne

---

我赞同，我认为.prop()是正确的方法，它被专门添加用于设置像disabled="disabled"这样的属性，而且非常优雅。 - Morvael

这是一个很棒的答案！ - LeBlaireau

完美的简单、短小、有效的解决方案！谢谢伙计！ - Cowwando

这是一个很棒的解决方案。 - Asif Rao

更新一下，使用箭头函数可以使代码更简洁：$('#el').prop('disabled', (i, v) => !v);。该代码的作用是将元素 #el 的 disabled 属性的值取反。 - igneosaur

Answer 2

我猜为了获得完整的浏览器兼容性，应该通过值disabled来设置disabled或将其移除！
这是我刚刚制作的一个小插件：

(function($) {
    $.fn.toggleDisabled = function() {
        return this.each(function() {
            var $this = $(this);
            if ($this.attr('disabled')) $this.removeAttr('disabled');
            else $this.attr('disabled', 'disabled');
        });
    };
})(jQuery);

示例链接。

编辑：更新示例链接/代码以保持链式调用！
编辑2：
根据@lonesomeday的评论，这是一个增强版本：

(function($) {
    $.fn.toggleDisabled = function(){
        return this.each(function(){
            this.disabled = !this.disabled;
        });
    };
})(jQuery);

- ifaour

---

这个方法或许可行，但因为你不断地创建新的jQuery对象，它会变得缓慢。只需要使用$.fn.toggleDisabled = function(){ return this.each(function(){ this.disabled = !this.disabled; });}就可以了。 - lonesomeday

@lonesomeday：我本来想发这个帖子，但我倾向于认为这不是设置/取消“disabled”属性的正确方法。无论如何，如果您可以确认这是跨浏览器解决方案...我会更新我的答案。 - ifaour

对于任何未来的谷歌搜索者，此解决方案同样适用于属性“required”。 - skybondsor

“prop”是Arne所说的更好的方法，自1.6以来。 - Ciro Santilli OurBigBook.com

不，我不建议这样做，prop更好。 - Orman Faghihi Mohaddes

Answer 3

$('#checkbox').click(function(){ $('#submit').attr('disabled', !$(this).attr('checked')); });

当 id 为 checkbox 的元素被点击时，如果它的属性 checked 被设置，则禁用提交按钮（id 为 submit 的元素）。

- Присяжный Дмитрий

---

注意：仅适用于jQuery 1.6以下版本。在两个出现的地方都使用.prop()而不是attr()来获取布尔值。请参见http://api.jquery.com/prop/。 - Manuel Arwed Schmidt

@ManuelArwedSchmidt 不对。我认为您还没有理解attr和prop之间的区别。 - Neeraj

Answer 4

另一种简单的选项，可以在复选框被单击时更新。

HTML:

<input type="checkbox" id="checkbox/>
<input disabled type="submit" id="item"/>

jQuery：

$('#checkbox').click(function() {
    if (this.checked) {
        $('#item').prop('disabled', false); // If checked enable item       
    } else {
        $('#item').prop('disabled', true); // If checked disable item                   
    }
});

实际运用中：链接

- unequalsine

---

使用$('#item').prop('disabled', this.checked);替换if块以实现禁用/启用#item元素。 - Naeem Sarfraz

Answer 5

经过一段时间，感谢@arne，我创建了一个类似的小函数来处理输入应该被禁用和隐藏，或者启用和显示:

function toggleInputState(el, on) {
  // 'on' = true(visible) or false(hidden)
  // If a field is to be shown, enable it; if hidden, disable it.
  // Disabling will prevent the field's value from being submitted
  $(el).prop('disabled', !on).toggle(on);
}

然后，一个 jQuery 对象（例如 $('input[name="something"]') ）可以通过以下方式进行切换：

toggleInputState(myElement, myBoolean)

- eon

Answer 6

使用attr的回调语法非常简单：

$("#product1 :checkbox").click(function(){
  $(this)
   .closest('tr') // find the parent row
       .find(":input[type='text']") // find text elements in that row
           .attr('disabled',function(idx, oldAttr) {
               return !oldAttr; // invert disabled value
           })
           .toggleClass('disabled') // enable them
       .end() // go back to the row
       .siblings() // get its siblings
           .find(":input[type='text']") // find text elements in those rows
               .attr('disabled',function(idx, oldAttr) {
                   return !oldAttr; // invert disabled value
               })
               .removeClass('disabled'); // disable them
});

- lonesomeday