jQuery: Submit-Button deaktivieren, wenn keine Checkbox ausgewählt ist
Tipp von Computer Experte | 27.11.2013 um 15:02
Manchmal möchte man das Abschicken eines Formulars erst dann erlauben, wenn man eine oder mindestens eine Checkbox ausgewählt hat. In diesem Tipp möchte ich euch zeigen, wie ihr das mit jQuery hinbekommen könnte. Das folgende Skript sorgt dafür, dass der Submit-Button immer nur dann aktiv ist, wenn mindestens eine Checkbox selektiert ist.
HTML
Unser HTML ist ein simples Formular mit drei Checkboxen und einem Submit-Button:
<form action=""> <input class="cbox" type="checkbox" name="cb1" value="1"> 1 <input class="cbox" type="checkbox" name="cb2" value="2"> 2 <input class="cbox" type="checkbox" name="cb3" value="3"> 3 <input id="bt_submit" type="submit" value="Senden"> </form>
JavaScript/jQuery
Unseren jQuery Code lassen wir nach dem Laden des Dokuments ausführen ($(document).ready).
<script type="text/javascript"> $(document).ready(function() { $('#bt_submit').attr("disabled",true); $('.cbox').change(function() { $('#bt_submit').attr('disabled', $('.cbox:checked').length == 0); }); }); </script>
Zunächst setzen wir unseren Submit-Button auf disabled. Anschließend belegen wir die Checkboxen mit einer Funktion, die bei jeder Änderung des Zustandes der Checkboxen den Submit-Button anpassend und abhängig von der Selektierung aktiviert oder deaktiviert.
Achtung: Diese Funktion funktioniert natürlich nur dann, wenn der Nutzer in seinem Browser JavaScript aktviert hat und ersetzt keinen serverseitigen Check.
Über den Autor
Der Autor hat keine Kurzbeschreibung seines Profils angegeben.
Profil anzeigen
Ähnliche Themen
jQuery: Window.OnBeforeUnload Warnung anzeigen außer wenn Submit-Button geklickt wurde
Tipp | 0 Kommentare
PHP: Formular mit vielen Checkboxen komfortabel an Skript übergeben
Tipp | 8 Kommentare
jQuery: DIV Container abhängig von Checkbox anzeigen oder ausblenden
Tutorial | 2 Kommentare
HTML: Checkbox aktivieren wenn auf Text daneben geklickt wird
Frage | 1 Antwort
jQuery: Hinweis beim Verlassen der Seite wenn ein Formular noch nicht abgeschickt wurde
Tutorial | 1 Kommentar
HTML Formular: Weiterleitung abhängig von Radiobutton oder Checkbox
Tutorial | 0 Kommentare
Wichtiger Hinweis
Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.
Jetzt mitmachen
Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.
Und falls man nur eine einzelne Checkbox hat, geht es noch viel einfacher:
In this.checked steht, ob die geklickte Checkbox gerade ausgewähltes oder nicht. Mit !this.checked setzen wir unseren Submit-Button immer auf genau das Gegenteil.
28.11.2013 um 02:47
Bin kein JavaScript Experte, möchte aber fragen, wie das ganze aussieht, wenn zwei Checkboxen angeklickt werden müssen, bevor der Sendbutton aktiviert wird?
01.10.2020 um 18:12
Meinst du so etwas hier:
Wobei deine Checkboxen beide die Klasse "cbox" haben müssen und eine Checkbox die ID "cbox1" und die andere die ID "cbox2" hat.
01.10.2020 um 19:21
Das ist die vollständige korrekte Lösung.
02.10.2020 um 08:15
Ja, das war es wohl. Recht herzlichen Dank für die super schnelle Hilfe!
01.10.2020 um 21:26