IT-Academy Logo
Sign Up Login Help
Home - Programmieren - JavaScript - Javascript: Checkboxen deaktivieren



Javascript: Checkboxen deaktivieren

Ein Tutorial das zeigt wie Sie nur eine maximale Anzahl an markierten Checkboxen erlauben.


Autor: Patrick Faes (dreamer)
Datum: 01-08-2006, 22:32:30
Referenzen: siehe Text
Schwierigkeit: Anfänger
Ansichten: 16728x
Rating: Bisher keine Bewertung.

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]



Einführung

Formulare erlauben es dem Internet-Surfer eine große Menge an Daten an einem Server zu schicken. Der Server kann diese Daten dann auswerten und auf die Wünsche des Besuchers eingehen. Diese Form von Kommunikation machte das Internet zu dem was es heute ist. Aber manchmal möchten Sie vielleicht verhindern dass der Besucher mehr Daten schickt als notwendig oder gar erlaubt ist.

HTML bietet eine Reihe von Möglichkeiten um vordefinierte Werte an einem Server zu senden:
Selectboxen
Radio-Buttons Option 1
Option 2
Option 3
Option 4
Option 5
Checkboxen Option 1
Option 2
Option 3
Option 4
Option 5
Selectboxen erlauben es einen oder mehrere Werte zu selektieren (wenn die Eigenschaft "multiple" gesetzt ist), indem mit gedrückt gehaltener STRG-Taste nacheinander mehrere Optionen ausgewählt wurden.
Radio-Buttons sind gruppierte Optionen wovon der Besucher nur eine einzige auswählen kann.
Mit Checkboxen kann der Besucher einzelne Optionen aus- bzw. abwählen.

Die oben genannte Formular-Elemente haben gemeinsam dass Sie die maximale Anzahl an erlaubten Optionen nicht bestimmen können, bzw. Sie können nicht verhindern dass der Besucher mehr Optionen auswählt als erlaubt (mit Ausnahme von Radio-Buttons, die ja eh nur eine Option pro Gruppe erlauben).

Nehmen wir dazu mal das Beispiel eines Pizzalieferanten. Auf der Webseite des Pizzabäckers können Sie Ihre Pizza nach Wunsch zusammenstellen. Die Basisvariante besteht aus einer Pizza mit Käse, Tomaten und Gewürzen. Sie können zusätzlich maximal vier Zutaten frei wählen. Wir verwenden dazu eine Gruppe von Checkboxen.

Wählen Sie zusätzliche Zutaten (maximal vier):
Ananas
Artischocken
Champignons
extra Käse
Lachs
Mozzarella
Rindfleisch
Salami
Schinken
Thunfisch
Zwiebeln
Wenn Sie das obige Formular testen, werden Sie sehen dass Sie beliebig viele Checkboxen markieren können. Wenn die Daten dann beim Server ankommen, weiß der zwar dass ein Kunde maximal nur vier extra Zutaten wählen kann, jedoch kann der Server dann nicht die Entscheidung treffen welche Zutaten auf der Pizza kommen wenn der Kunde mehr als vier extra Zutaten ausgewählt hat. Deshalb wäre es schon gut wenn dies gleich verhindert wird. Versuchen Sie dasselbe nun nochmal beim folgenden Formular:

Wählen Sie zusätzliche Zutaten (maximal vier):
Ananas
Artischocken
Champignons
extra Käse
Lachs
Mozzarella
Rindfleisch
Salami
Schinken
Thunfisch
Zwiebeln
Wie Sie sehen, erlaubt das Javascript es dem Kunde jetzt nicht mehr als vier Zutaten zu wählen.


Theoretische Ausarbeitung

Das Skript funktioniert indem es, jedesmal wenn der Kunde eine Zutat auswählt, zählt wieviele Zutaten bereits ausgewählt wurden. Wenn bereits vier Zutaten gewählt wurden, werden alle unmarkierte Checkboxen deaktiviert. Dies hat zur Folge dass keine weiteren Zutaten gewählt werden können. Allerdings bleiben die Checkboxen der ausgewählten Zutaten aktiv, bzw. veränderbar. Warum fragen Sie sich? Wenn der Kunde es sich dennoch anders überlegt, kann er wieder eine Zutat aus seiner Bestellung ausnehmen. Dabei wird das Javascript wieder zählen wieviele Zutaten ausgewählt wurden. Sind wieder weniger als vier Zutaten ausgewählt, werden alle Checkboxen wieder aktiviert. Das kännen Sie ruhig im obigen Beispiel selbst austesten.

Das Skript erstellen wir in zwei Versionen: die erste Verion verwendet unterschiedliche Namen, während die Zweite alle Checkboxen unter einem Namen gruppiert. Diese zweite Variante verwendet Namen wie z.B. "zutaten[]". Am Ende des Namens stehen rechteckige Klammern. Somit wird PHP alle Checkboxen mit diesem Namen automatisch zu einem Array zusammenfassen. Sie sollten dabei aber beachten dass Sie damit kein valides HTML erstellen (obwohl die Browser damit keine Probleme haben). Ich kann auch nicht garantieren dass dies funktioniert in andere serverseitige Programmiersprachen wie z.B. ASP oder JSP.


Erste Variante: Checkboxen mit unterschiedliche Namen

In der ersten Variante haben alle Checkboxen einen eigenen Namen:
   <form>
   <input type="checkbox" name="Ananas" value="Ananas"> Ananas 
   <input type="checkbox" name="Artischocken" value="Artischocken"> Artischocken 
   <input type="checkbox" name="Champignons" value="Champignons"> Champignons 
   <input type="checkbox" name="extra_Kaese" value="extra_Käse"> extra Käse 
   <input type="checkbox" name="Lachs" value="Lachs"> Lachs
   <input type="checkbox" name="Mozzarella" value="Mozzarella"> Mozzarella 
   <input type="checkbox" name="Rindfleisch" value="Rindfleisch"> Rindfleisch
   <input type="checkbox" name="Salami" value="Salami"> Salami 
   <input type="checkbox" name="Schinken" value="Schinken"> Schinken 
   <input type="checkbox" name="Thunfisch" value="Thunfisch"> Thunfisch 
   <input type="checkbox" name="Zwiebeln" value="Zwiebeln"> Zwiebeln 
   </form>
Jede Checkbox (input type="checkbox") hat einen Namen und einen Wert (value). Diese sind gleich, absehen von "extra Käse", da Sonderzeichen (in diesem Fall ein Umlaut) nicht in Elementennamen vorkommen dürfen, bzw. sollten. In PHP können Sie testen ob eine Checkbox markiert wurde mit if (isset($_POST['Ananas'])). Dabei ist das value-Attribut eigentlich überflüssig. Von anderen Programmiersprachen kann ich nicht sagen ob das auch so ist. Im Zweifelfall sollten Sie das value-Attribut behalten.

Nun müssen Sie in Javascript ein Array erstellen mit den Namen aller Checkboxen die zu einer Gruppe gehören. In diesem Fall wäre das also:
   var gruppe = new Array('Ananas', 'Artischocken', 'Champignongs', 'extra_Kaese', 'Lachs',
   'Mozzarella', 'Rindfleisch', 'Salami', 'Schinken', 'Thunfisch', 'Zwiebeln');
Beachten Sie dass der Code hier aus Platzgründen umgebrochen wurde. Beim Programmieren in Javascript müssen Sie dies auf einer Zeile ohne Umbruch schreiben, da Sie ansonsten eine Fehlermeldung erhalten und das Skript abbricht.

Nun erweitern Sie alle Checkboxen mit dem sogenannten Ereignis "onChange". Diese löst eine angegebene Aktion in Javascript aus wenn sich der Zustand der Checkbox (markiert oder unmarkiert) ändert.
   <form>
   <input type="checkbox" name="" value="" onChange="Zutaten(this.form);">
   </form>
Wenn Sie diese Checkbox markieren oder unmarkieren, wird die Funktion Zutaten() aufgerufen. Dabei wird das Formular worin sich die Checkbox befindet als Parameter übergeben. Somit weiß die Funktion in welchem Formular sich die Checkbox befindet. Die Funktion sieht dann so aus:
   <script type="text/javascript" language="javascript">
   function Zutaten (formular)
   {
       var gruppe = new Array('Ananas', 'Artischocken', 'Champignongs',
       'extra_Kaese', 'Lachs',  'Mozzarella', 'Rindfleisch', 'Salami',
       'Schinken', 'Thunfisch', 'Zwiebeln');

       var anzahlMarkiert = 0.
       var maxErlaubt = 4;

       for (var i = 0; i < gruppe.length; i++)
       {
             if (formular.elements[gruppe[i]].checked == true)    anzahlMarkiert++;
             if (anzahlMarkiert === maxErlaubt) break;
       }

       if (anzahlMarkiert === maxErlaubt)
       {
             for (var i = 0; i < gruppe.length; i++)
             {
                   if (formular.elements[gruppe[i]].checked == false)
                        formular.elements[gruppe[i]].disabled = true;
             } 
       }
       else
       {
             for (var i = 0; i < gruppe.length; i++)
             {
                   formular.elements[gruppe[i]].disabled = false;
             } 
       }
   }
   </script>
Die Funktion ist eigentlich recht simpel.
Anfangs steht das Array gruppe mit den Namen der Checkboxen. Dann kommen die Variablen anzahlMarkiert und maxErlaubt. Die erste Variable sollte anfangs immer den Wert 0 haben (weil wir diese Variable verwenden um zu zählen wieviele Checkboxen markiert wurden). Den Wert für die Variable maxErlaubt bestimmen Sie dagegen selbst. In diesem Beispiel hat sie den Wert 4, weil wir ja nur maximal 4 extra Zutaten erlauben.

Danach kommt sofort eine erste Schleife womit wir alle Namen im Array gruppe durchlaufen. Wir sehen nach ob die Eigenschaft checked einer Checkbox den Wert true hat. Wenn dies so ist, ist die Checkbox markiert und daher erhöhen wir die Variable anzahlMarkiert um eins. Danach checken wir sofort ob schon soviele Checkboxen markiert wurden als erlaubt. Wenn dies der Fall ist, wird die Schleife abgebrochen da es nicht mehr notwendig ist die restlichen Checkboxen zu überprüfen.

Ich möchte noch kurz auf der Schleife zurückkommen, bzw. wie genau der Code funktioniert. Beachten Sie dass wir hier das Formular ansprechen über den Parameter formular (im onChange-Ereignis durch this.form ermittelt). Ein Umweg wäre document.forms['FormularName']. Über das Unterobjekt elements greifen Sie auf die einzelne Checkboxen zu. Um zu bestimmen auf welche Checkbox Sie zugreifen möchten, schreiben Sie den Namen der Checkbox zwischen eckige Klammern hinter dem Unterobjekt elements. Der aktuelle Namen befindet sich in gruppe[i].
Eine weitere Besonderheit ist die Verwendung vom "==="-Operator in der zweiten Bedingung (dort wo überprüft wird ob die Variable anzahlMarkiert gleich maxErlaubt ist). Dieser Operator wird nicht nur die Werte der beiden Variablen testen, sondern zusätzlich Typengleichheit bedingen. Es könnte nämlich sein dass die numerischen Wert 0 und 1 als Boolean (true/false) gewertet werden. Der "==="-Operator verhindert dies.

Nachdem gezählt wurde wieviele Checkboxen markiert wurden, wird ein Test ausgeführt. Wenn schon genau soviele Checkboxen markiert wurden wie erlaubt ist, dann müssen alle andere Checkboxen deaktiviert werden. Der Grund um die markierten Checkboxen aktiv zu lassen, ist der dass der Kunde es sich ja auch wieder anders überlegen könnte, und daher muss er diese ja auch wieder unmarkieren können, wodurch alle Checkboxen wieder aktiv werden.

Um dies zu erreichen wird, wie schon gesagt, geprüft ob die Variable anzahlMarkiert gleich maxErlaubt ist. Wenn dies so ist, dann werden alle Checkboxen durchlaufen und getestet ob diese markiert sind. Wenn dies NICHT der Fall ist, werden sie deaktiviert. Wenn anzahlMarkiert ungleich maxErlaubt ist, werden alle Checkboxen aktiviert (um sicher zu stellen dass wirklich alle Checkboxen aktiv sind, übrigens brauchen wir dafür keine weiteren Tests). Um eine Checkbox zu deaktivieren, bzw. aktivieren können Sie Gebrauch machen von der Eigenschaft disabled (ausgeschaltet). Die Handhabung dieser Eigenschaft ist für Anfänger aber oft verwirrend.

Die Eigenschaft disabled benötigt einen Wahrheitswert (Boolean). Diese hat den Wert "wahr" (true) oder "unwahr" (false). Oft denken Leute, wenn die Eigenschaft den Wert "true" hat, dass dadurch die Checkbox aktiviert wird. Der Gegenteil ist jedoch der Fall. "disabled = true" wird gelesen als "deaktiviert = ja". Wollen Sie eine Checkbox deaktivieren, müssen Sie diese Eigenschaft also auf "true" setzen, um die Checkbox dagegen zu aktivieren, geben Sie diese Eigenschaft auf den Wert "false".

Nun könnte es sein dass Sie mehrere Gruppen von Checkboxen auf der Seite haben. Um nicht für jede Gruppe eine neue Funktion schreiben zu müssen, werden wir die obige Funktion leicht modifizieren. Zuerst erstellen wir mehrere Arrays mit Namen von Checkboxen die zusammen gehören.
   var zusammen = new Array();
   zusammen['Fleisch'] = new Array('Salami', 'Rindfleisch', 'Schinken');
   zusammen['Fisch'] = new Array('Thunfisch', 'Lachs', 'Seefilet');
Das Beispiel könnte z.B. dazu dienen um eine Pizza zu belegen mit maximal einer Fleischsorte kombiniert mit maximal einer Fischsorte. Allerdings könnte es auch sein dass z.B. zwei Fleischsorten und einer Fischsorte kombiniert werden können. Dann brauchen Sie ein extra Array der diese Maximalzahlen beinhaltet.
   var maximal = new Array();
   maximal['Fleisch'] = 2;
   maximal['Fisch'] = 1;
Beachten Sie dass die Array-Indexe in beide Arrays (zusammen und maximal) gleich sind. Somit erkennt das Skript später den Zusammenhang.
Als zweiten Parameter im Funktionsaufruf müssen Sie dann den Gruppennamen ("Fleisch" oder "Fisch") mitgeben, wie im nächsten Beispiel gezeigt wird ("Fleisch" wird als zweiter Parameter mitgegeben):
   <input type="checkbox" value="" name="" onChange="Zutaten(this.form, 'Fleisch');"> Fleisch
Die Funktion sieht dann so aus:
   <script type="text/javascript" language="javascript">
   function Zutaten (formular, gruppenNamen)
   {
       var zusammen = new Array();
       zusammen['Fleisch'] = new Array('Salami', 'Rindfleisch', 'Schinken');
       zusammen['Fisch'] = new Array('Thunfisch', 'Lachs', 'Seefilet');

       var maximal = new Array();
       maximal['Fleisch'] = 2;
       maximal['Fisch'] = 1;

       var anzahlMarkiert = 0.
       var maxErlaubt = maximal[gruppenNamen];

       for (var i = 0; i < zusammen[gruppenNamen].length; i++)
       {
             if (formular.elements[zusammen[gruppenNamen][i]].checked == true)    anzahlMarkiert++;
             if (anzahlMarkiert === maxErlaubt) break;
       }

       if (anzahlMarkiert === maxErlaubt)
       {
             for (var i = 0; i < zusammen[gruppenNamen].length; i++)
             {
                   if (formular.elements[zusammen[gruppenNamen][i]].checked == false)
                        formular.elements[zusammen[gruppenNamen][i]].disabled = true;
             } 
       }
       else
       {
             for (var i = 0; i < zusammen[gruppenNamen].length; i++)
             {
                   formular.elements[zusammen[gruppenNamen][i]].disabled = false;
             } 
       }
   }
   </script>
Es wird eigentlich nur sehr wenig verändert. Der zweite Parameter bekommt den Namen gruppenNamen. Die Variable maxErlaubt bekommt den Wert von maximal[gruppenNamen]. Danach werden alle Referzen zur Variablen gruppe aus der ersten Funktion ersetzt mit zusammen[gruppenName]. Das war's auch schon.


Mehrere Checkboxen mit demselben Namen

Wie anfangs schon gesagt werden wir die Funktion nochmal kurz anpassen für Checkboxen mit demselben Namen. Der Name bekommt dann rechteckige Klammern, z.B. "zutat[]". PHP setzt alle Formularfelder mit demselben Namen und rechteckige Klammern sofort in einem Array.

Achtung: PHP macht das nur wenn die rechteckige Klammern hinzugefügt werden, ansonsten nehmt er einfach den letzten Wert, zusätzlich ist das value-Attribut auch notwendig um damit etwas anfangen zu können, denn jetzt lassen sich die ausgewählte Optionen nicht mehre an ihre Namen erkennen.

Als zweiten Parameter können wir dann einfach den Namen der aktuellen Checkboxen mitgeben, denn dieser ist für alle Checkboxen aus der Gruppe dann auch derselbe.
   <input type="checkbox" name="zutat[]" value="Salami" onChange="Zutaten(this.form, this.name);"> Salami
Die Funktion sieht dann so aus:
   <script type="text/javascript" language="javascript">
   function Zutaten (formular, gruppe)
   {
       var anzahlMarkiert = 0.
       var maxErlaubt = 4;

       for (var i = 0; i < formular.elements[gruppe].length; i++)
       {
             if (formular.elements[gruppe][i].checked == true)    anzahlMarkiert++;
             if (anzahlMarkiert === maxErlaubt) break;
       }

       if (anzahlMarkiert === maxErlaubt)
       {
             for (var i = 0; i < formular.elements[gruppe].length; i++)
             {
                   if (formular.elements[gruppe][i].checked == false)
                        formular.elements[gruppe][i].disabled = true;
             } 
       }
       else
       {
             for (var i = 0; i < formular.elements[gruppe].length; i++)
             {
                   formular.elements[gruppe][i].disabled = false;
             } 
       }
   }
   </script>
Auch hier verändert sich nicht besonders viel. Der Name der Checkboxen wird als Parameter gruppe mitgegeben. Danach werden alle Referenzen einfach verändert in formular.elements[gruppe]. Das Einzige was Sie dabei beachten sollen, ist wie Javascript auf die Checkboxen zugreift.

Oft wird fälschlicherweise angenommen, dass wenn drei Checkboxen den Namen "zutat[]" haben, dass mit formular.elements['zutat'][2] darauf zugegriffen werden kann. Der Name ist aber nicht "zutat", sondern "zutat[]". Die korrekte Syntax ist also formular.elements['zutat[]'][2]. In unserem Beispiel ist der Name aber in der Variable gruppe enthalten, wodurch obiges hier keine Rolle spielt.


[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04508
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06246
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 1154
Comments: 0