Alihkan input atribut yang dinonaktifkan menggunakan jQuery

Ini kode saya:

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

Bagaimana cara beralih .attr('disabled',false);?

Sepertinya saya tidak dapat menemukannya di Google.

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

The .prop()Metode menerima dua argumen:

• Nama properti (dinonaktifkan, dicentang, dipilih) apa pun yang benar atau salah
• Nilai properti , dapat:
  • ( kosong ) - mengembalikan nilai saat ini.
  • boolean (true / false) - mengatur nilai properti.
  • function - Dieksekusi untuk setiap elemen yang ditemukan, nilai yang dikembalikan digunakan untuk mengatur properti. Ada dua argumen yang disampaikan; argumen pertama adalah indeks (0, 1, 2, meningkat untuk setiap elemen yang ditemukan). Argumen kedua adalah nilai elemen saat ini (benar / salah).

Jadi dalam hal ini, saya menggunakan fungsi yang memasok saya indeks (i) dan nilai saat ini (v), kemudian saya mengembalikan kebalikan dari nilai saat ini, sehingga keadaan properti terbalik.

Saya kira untuk mendapatkan komparabilitas browser lengkap disabledharus ditetapkan oleh nilai disabledatau dihapus!
Ini adalah plugin kecil yang baru saja saya buat:

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

Tautan contoh .

SUNTING: perbarui tautan / kode contoh untuk mempertahankan keterkaitan!
EDIT 2:
Berdasarkan komentar @lonesomeday, ini versi yang disempurnakan:

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

    $ ('# checkbox'). klik (function () {
        $ ('# submit'). attr ('dinonaktifkan',! $ (ini) .attr ('dicentang'));
    });

Opsi sederhana lain yang diperbarui pada klik kotak centang.

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

Dalam aksi: tautan

Beberapa saat kemudian, dan terima kasih kepada @arne, saya membuat fungsi kecil yang serupa ini untuk menangani di mana input harus dinonaktifkan DAN disembunyikan, atau diaktifkan DAN ditampilkan:

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

Kemudian objek jQuery (seperti $ ('input [name = "something"]')) hanya diaktifkan menggunakan:

toggleInputState(myElement, myBoolean)

Ini cukup sederhana dengan sintaks callback dari 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
});