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

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.