jQuery deaktivieren/aktivieren Schaltfläche senden

Question

Ich habe dieses HTML:

<input type="text" name="textField" />
<input type="submit" value="send" />

Wie kann ich so etwas tun?

• Wenn das Textfeld leer ist, sollte das Absenden deaktiviert sein (disabled="disabled").
• Wenn etwas in das Textfeld eingegeben wird, wird das Attribut "deaktiviert" entfernt.
• Wenn das Textfeld wieder leer wird (der Text wird gelöscht), sollte die Schaltfläche "Senden" wieder deaktiviert werden.

Ich habe etwas Ähnliches versucht:

$(document).ready(function(){
    $('input[type="submit"]').attr('disabled','disabled');
    $('input[type="text"]').change(function(){
        if($(this).val != ''){
            $('input[type="submit"]').removeAttr('disabled');
        }
    });
});

aber es funktioniert nicht. Irgendwelche Ideen?

Answer 1

Das Problem ist, dass das Änderungsereignis nur ausgelöst wird, wenn der Fokus von der Eingabe wegbewegt wird (z. B. wenn jemand die Eingabe wegklickt oder die Tabulatortaste drückt). Versuchen Sie stattdessen, keyup zu verwenden:

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }
     });
 });

Answer 2

$(function() {
  $(":text").keypress(check_submit).each(function() {
    check_submit();
  });
});

function check_submit() {
  if ($(this).val().length == 0) {
    $(":submit").attr("disabled", true);
  } else {
    $(":submit").removeAttr("disabled");
  }
}

Answer 3

Diese Frage ist 2 Jahre alt, aber sie ist immer noch eine gute Frage und war das erste Google-Ergebnis ... aber alle vorhandenen Antworten empfehlen die Einstellung und entfernen das HTML Attribut (removeAttr("disabled")) "disabled", was nicht der richtige Ansatz ist. Es gibt eine Menge Verwirrung in Bezug auf Attribut vs. Eigenschaft.

HTML

Das "behindert" in <input type="button" disabled> im Markup wird als boolesches Attribut durch das W3C .

HTML vs. DOM

Zitat:

Eine Eigenschaft befindet sich im DOM; ein Attribut befindet sich im HTML-Code, der in das DOM geparst wird.

https://stackoverflow.com/a/7572855/664132

JQuery

Verwandt:

Das wichtigste Konzept des Attributs checked ist jedoch, dass es nicht mit der Eigenschaft checked übereinstimmt. Die Attribut entspricht eigentlich der Eigenschaft defaultChecked und sollte nur verwendet werden, um den Anfangswert festzulegen des Kontrollkästchens. Der Wert des Attributs checked ändert sich nicht mit dem Zustand des Ankreuzfeldes, die Eigenschaft checked hingegen schon. Daher ist die browserübergreifend kompatible Art und Weise zu bestimmen, ob ein Kontrollkästchen markiert ist, die Eigenschaft...

Einschlägig:

Eigenschaften wirken sich im Allgemeinen auf den dynamischen Zustand eines DOM-Elements aus, ohne das serialisierte HTML-Attribut zu verändern. Beispiele hierfür sind die value-Eigenschaft von Eingabeelementen, die behindertes Eigentum von Eingängen und Schaltflächen oder die Eigenschaft "checked" eines Kontrollkästchens. Die Methode .prop() sollte zum Setzen von disabled und checked anstelle der Methode .attr() verwendet werden.

$( "input" ).prop( "disabled", false );

Zusammenfassung

Um [...] DOM-Eigenschaften wie den [...] Deaktivierungsstatus von Formularelementen zu ändern, verwenden Sie die .prop() Methode.

( http://api.jquery.com/attr/ )

---

Was den Teil der Frage betrifft, in dem es um die Verhinderung von Veränderungen geht: Es gibt ein Ereignis namens "Eingabe", aber Browserunterstützung ist begrenzt und es ist nicht ein jQuery-Ereignis, so jQuery wird nicht machen es funktionieren. Das Änderungsereignis funktioniert zuverlässig, wird aber ausgelöst, wenn das Element den Fokus verliert. Also könnte man die beiden kombinieren (manche Leute hören auch auf keyup und paste).

Hier ist ein ungetestetes Stück Code, um zu zeigen, was ich meine:

$(document).ready(function() {
    var $submit = $('input[type="submit"]');
    $submit.prop('disabled', true);
    $('input[type="text"]').on('input change', function() { //'input change keyup paste'
        $submit.prop('disabled', !$(this).val().length);
    });
});

Answer 4

Um das deaktivierte Attribut zu entfernen, verwenden Sie,

 $("#elementID").removeAttr('disabled');

und die Verwendung des Attributs "deaktiviert" hinzuzufügen,

$("#elementID").prop("disabled", true);

Viel Spaß :)

Answer 5

Oder für uns, die wir nicht für jede Kleinigkeit jQ verwenden wollen:

document.getElementById("submitButtonId").disabled = true;