33 Stimmen

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.

AntwortenPositivNegativDatumStimmen
Avatar
22 Stimmen

Und falls man nur eine einzelne Checkbox hat, geht es noch viel einfacher:

$("#cbox").click(function() {
   $("#bt_submit").attr("disabled", !this.checked);
});

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

AntwortenPositiv Negativ
Avatar
00 Stimmen

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

AntwortenPositiv Negativ
Avatar
11 Stimme

Meinst du so etwas hier:

$('.cbox').change(function() {
  $('#bt_submit').attr('disabled', 
  $('#cbox1:checked') && $('#cbox2:checked'));
});

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

Positiv Negativ
Avatar
00 Stimmen

$('#bt_submit').attr("disabled",true);

$('.chkfield').change(function() {
   $('#bt_submit').attr('disabled', 
     $('#cbox1:checked').length ==
     0 || $('#cbox2:checked').length == 0);
});

Das ist die vollständige korrekte Lösung.
02.10.2020 um 08:15

Positiv Negativ
Avatar
00 Stimmen

Ja, das war es wohl. Recht herzlichen Dank für die super schnelle Hilfe!
01.10.2020 um 21:26

Positiv Negativ
Antworten
Antworten

Über den Autor

AvatarDer Autor hat keine Kurzbeschreibung seines Profils angegeben.
Profil anzeigen

 

Ähnliche Themen

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.