jQuery: Submit-Button deaktivieren, wenn keine Checkbox ausgewählt ist

Manchmal möchte man das Abschicken eines Formulars erst dann erlauben, wenn der Nutzer eine oder mindestens eine Checkbox ausgewählt hat. In diesem kleinen Tutorial möchte ich euch zeigen, wie ihr das mit JavaScript und jQuery hinbekommen könnt.

Das folgende Skript sorgt dafür, dass der Submit-Button immer nur dann aktiv ist, wenn mindestens eine Checkbox der zugehörigen Form 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

Den folgenden jQuery-Code lassen wir direkt nach dem Laden der HTML-Seite ausführen, indem wir $(document).ready() verwenden:

<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 (dazu mehr im nächsten Abschnitt). Anschließend belegen wir die Checkboxen mit einer Funktion, die bei jeder Änderung des Zustandes der Checkboxen den Submit-Button anpasst und abhängig von der Selektierung aktiviert oder deaktiviert. Dazu prüfen wir die Anzahl der selektierten Checkboxen auf 0 und setzen das disabled-Attribute als diese Bedingung stimmt.

Wichtig: Nutzer mit deaktiviertem JavaScript beachten

Diese Funktion funktioniert natürlich nur dann, wenn der Nutzer in seinem Browser JavaScript aktiviert hat und ersetzt keinen serverseitigen Check, der immer noch zusätzlich durchgeführt werden sollte.

Aus diesem Grund setzen wir das "disabled"-Attribut des Submit-Buttons auch erst über unseren JavaScript-Code und nicht bereits im HTML, was man theoretisch ja auch machen könnte. So ist der Submit-Button beim Laden der Seite zunächst nicht deaktiviert, auch wenn zu diesem Zeitpunkt keine Checkbox ausgewählt ist. Für Nutzer mit aktivem JavaScript wird der Button sofort nach dem Laden deaktiviert, diese Nutzer bekommen gar nicht mit, dass der Button einmal aktiv war. Für Nutzer mit deaktiviertem JavaScript kann der JavaScript-Code dagegen nicht ausgeführt werden. Für diese Nutzer bleibt der Button aktiv und das Formular nutzbar. Hätten wir den Button sofort über HTML auf disabled gesetzt, wäre das Formular für diese Nutzer nicht verwendbar.