Aktivieren Sie das Attribut "Eingabe deaktiviert" mithilfe von jQuery

189

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.

Tommy Arnold
quelle
Gibt es einen Grund, warum Sie die deaktivierte Eigenschaft des Felds nicht verwenden können? $("input").get(0).disabled = isFalse;// jsfiddle.net/uAfhj
Shanimal
Ich fand das DependsOn- Plugin, das Sie vielleicht nützlich finden
Onshop

Antworten:

443
$('#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.

Arne
quelle
2
Upvoted als (ich glaube) .prop () ist der richtige Weg, dies zu tun und wurde genau hinzugefügt, um Dinge wie disabled = "disabled" + its elegant zu setzen
Morvael
5
Was ist i und v?
Matt R
@MattR Ich habe eine kurze Erklärung hinzugefügt.
Arne
Das ist eine großartige Antwort!
LeBlaireau
6
Als Update sieht dies mit $('#el').prop('disabled', (i, v) => !v);
Pfeilfunktionen
101

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);
ifaour
quelle
28
Dies mag funktionieren, wird aber langsam sein, da Sie ständig neue jQuery-Objekte erstellen. $.fn.toggleDisabled = function(){ return this.each(function(){ this.disabled = !this.disabled; });}ist alles, was du brauchst.
einsamer
@lonesomeday: Ich wollte dies posten, aber ich neige dazu zu denken, dass dies nicht der richtige Weg ist, um disabledAttribute zu setzen / zu setzen . Wie auch immer, wenn Sie bestätigen können, dass dies eine browserübergreifende Lösung ist. Ich werde meine Antwort aktualisieren.
ifaour
2
Für zukünftige Googler funktioniert diese Lösung für das Attribut 'erforderlich' gleich gut.
Skybondsor
propist die bessere Methode seit 1.6, wie von Arne gesagt.
Ciro Santilli 法轮功 冠状 病 六四 事件 5
19
    $ ('# checkbox'). click (function () {
        $ ('# submit'). attr ('disabled' ,! $ (this) .attr ('checked'));
    });

Присяжный Дмитрий
quelle
2
Hinweis: Funktioniert nur unter jQuery 1.6. Verwenden Sie in beiden Fällen .prop () anstelle von attr (), um boolesche Werte zurückzugewinnen. Siehe api.jquery.com/prop
Manuel Arwed Schmidt
5

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

ungleichmäßig
quelle
6
Werde den ifBlock los mit$('#item').prop('disabled', this.checked);
Naeem Sarfraz
2

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)
Äon
quelle
1

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
});
einsamer Tag
quelle