it-swarm.com.de

Deaktiviertes Eingabeattribut mit jQuery umschalten

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 kann ich .attr('disabled',false); umschalten?

Ich kann es bei Google nicht finden.

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

Die .prop() -Methode akzeptiert zwei Argumente:

  • Eigenschaft name (deaktiviert, markiert, ausgewählt) alles, was entweder wahr oder falsch ist
  • Eigenschaftswert kann sein:
    • ( leer) - gibt den aktuellen Wert zurück.
    • boolean (true/false) - Legt den Eigenschaftswert fest.
    • function - Wird für jedes gefundene Element ausgeführt, wird der zurückgegebene Wert verwendet, um die Eigenschaft festzulegen. 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 das aktuelle value des Elements (true/false).

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

413
Arne

Ich rate , um die volle Vergleichbarkeit des Browsers zu erhalten disabled sollte durch den Wert disabled gesetzt oder 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 Beispiel-Link/Code wurde aktualisiert, um die Verkettbarkeit aufrechtzuerhalten!
EDIT 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);
101
ifaour
 
 $ ('# checkbox'). click (function () {
 $ ('# submit'). attr ('disabled',! $ (this) .attr ('angehakt')); 
}); 
 

Eine weitere einfache Option, die bei 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

2
Jeroen Goedhart

Eine Weile später und dank @arne habe ich diese ähnliche kleine Funktion erstellt, um damit umzugehen, 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 zB $ ('input [name = "something"]')) einfach umgeschaltet mit:

toggleInputState(myElement, myBoolean)
2
eon

Dies ist mit der Callback-Syntax von attr ziemlich einfach:

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