Chuyển đổi thuộc tính bị vô hiệu hóa đầu vào bằng jQuery

Đây là mã của tôi:

$("#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.
});

Làm thế nào để tôi chuyển đổi .attr('disabled',false);?

Tôi dường như không thể tìm thấy nó trên Google.

$('#el').prop('disabled', function(i, v) { return !v; });

Các .prop()phương pháp chấp nhận hai đối số:

• Tên thuộc tính (bị vô hiệu hóa, được chọn, được chọn) bất cứ thứ gì đúng hoặc sai
• Giá trị tài sản , có thể là:
  • ( trống ) - trả về giá trị hiện tại.
  • boolean (true / false) - đặt giá trị thuộc tính.
  • Hàm - Được thực thi cho từng phần tử tìm thấy, giá trị được trả về được sử dụng để đặt thuộc tính. Có hai đối số được thông qua; đối số đầu tiên là chỉ số (0, 1, 2, tăng cho mỗi phần tử tìm thấy). Đối số thứ hai là giá trị hiện tại của phần tử (true / false).

Vì vậy, trong trường hợp này, tôi đã sử dụng một hàm cung cấp cho tôi chỉ số (i) và giá trị hiện tại (v), sau đó tôi trả về giá trị ngược lại của giá trị hiện tại, do đó trạng thái thuộc tính bị đảo ngược.

Tôi đoán để có được sự so sánh trình duyệt đầy đủ disablednên được đặt theo giá trị disabledhoặc bị xóa!
Đây là một plugin nhỏ mà tôi vừa thực hiện:

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

Ví dụ liên kết .

EDIT: đã cập nhật liên kết ví dụ / mã để duy trì khả năng liên kết!
EDIT 2:
Dựa trên nhận xét @lonesomeday, đây là phiên bản nâng cao:

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

    $ ('# hộp kiểm'). click (function () {
        $ ('# submit'). attr ('bị vô hiệu hóa' ,! $ (Cái này) .attr ('đã kiểm tra'));
    });

Một tùy chọn đơn giản khác cập nhật khi nhấp vào hộp kiểm.

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

Trong hành động: liên kết

Khá lâu sau, và nhờ @arne, tôi đã tạo ra chức năng nhỏ tương tự này để xử lý nơi đầu vào bị vô hiệu hóa VÀ ẩn hoặc bật VÀ hiển thị:

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

Sau đó, một đối tượng jQuery (chẳng hạn như $ ('input [name = "Something"]')) được chuyển đổi đơn giản bằng cách sử dụng:

toggleInputState(myElement, myBoolean)

Điều này khá đơn giản với cú pháp gọi lại của 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
});