Aktivieren Sie das Attribut "Eingabe deaktiviert" mithilfe von jQuery

Hier ist mein Code:

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

Wie schalte ich um? .attr('disabled',false); ?

Ich kann es anscheinend nicht bei Google finden.

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

Die .prop()Methode akzeptiert zwei Argumente:

• Objektnamen (disabled, geprüft, ausgewählt) alles , was entweder wahr oder falsch ist
• Objektwert , können sein:
  • ( leer ) - gibt den aktuellen Wert zurück.
  • boolean (true / false) - Legt den Eigenschaftswert fest.
  • Funktion - Wird für jedes gefundene Element ausgeführt, wird der zurückgegebene Wert zum Festlegen der Eigenschaft verwendet. Es wurden zwei Argumente übergeben. Das erste Argument ist der Index (0, 1, 2, erhöht sich für jedes gefundene Element). Das zweite Argument ist der aktuelle Wert des Elements (wahr / falsch).

In diesem Fall habe ich eine Funktion verwendet, die mir den Index (i) und den aktuellen Wert (v) geliefert hat. Dann habe ich das Gegenteil des aktuellen Werts zurückgegeben, sodass der Eigenschaftsstatus umgekehrt wird.

Ich denke , um eine vollständige Browser-Vergleichbarkeit zu erhalten, disabledsollte dies durch den Wert festgelegt disabledoder entfernt werden!
Hier ist ein kleines Plugin, das ich gerade gemacht habe:

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

Beispiellink .

BEARBEITEN: Der Beispiellink / Code wurde aktualisiert, um die Verkettbarkeit aufrechtzuerhalten!
BEARBEITEN 2:
Basierend auf dem Kommentar von @lonesomeday ist hier eine erweiterte Version:

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

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

Eine weitere einfache Option, die mit einem Klick auf das Kontrollkästchen aktualisiert wird.

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

In Aktion: Link

Eine Weile später und dank @arne habe ich diese ähnliche kleine Funktion erstellt, um zu handhaben, wo die Eingabe deaktiviert UND ausgeblendet oder aktiviert UND angezeigt werden soll:

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

Dann wird ein jQuery-Objekt (wie $ ('input [name = "Something"]')) einfach umgeschaltet, indem:

toggleInputState(myElement, myBoolean)

Dies ist ziemlich einfach mit der Rückrufsyntax von 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
});