Hauptmenü

Untermenü

JavaScript - Praxistutorial 2 - Formularelemente deaktivieren

1. Die Abschnitte

2. Das große Aussieben

Bei der "Super Global Hyper Meganet Ltd." ist man der Meinung, dass man mit einem bestimmten Schulabschluss nur eine bestimmte Ausbildung machen kann. Vom Prinzip her stimmt das folgende Beispiel zwar nicht, aber das soll uns egal sein. Hier geht es ja um JavaScript.

Zunächst wenden wir uns den radio-"Buttons" zu. Wenn man auf einen von denen klickt, so sollen entsprechend der Vorgaben einzelne Checkboxen unter dem Punkt "Ausbildung" deaktiviert werden. Dazu bekommt nun jedes radio-Element den folgenden Event-Handler verpasst.


onclick="setPreferences(this.value);"

Erläuterung

Das Zauberwörtchen this habt ihr ja schon im vorherigen Abschnitt kennen gelernt. In diesem Fall übergeben wir der Funktion setPreferences einfach den Wert des angeklickten radio-Buttons (this.value);

3. Die Funktion setPreferences

Ein "Hilfs-Array"

Um nun eine Unterscheidung nach Schulabschluss treffen zu können, benötigen wir dafür auch die entsprechenden Informationen. Dabei legen wir mal völlig willkürlich fest, dass ein Hauptschüler nur eine Ausbildung zum MATA/MATSE machen kann, eine Realschüler zusätzlich den FIAE und BA Inf. erreichen kann und Gymnasiasten alles dürfen (ob sie es können, sei mal dahingestellt)


function setPreferences(pref)
{
  var degree = new Array ();
  degree['Hauptschule']    = new Array ();
  degree['Hauptschule'][0] = 'MATA';
  degree['Hauptschule'][1] = 'MATSE';
  degree['Realschule']     = new Array ();
  degree['Realschule'][0]  = 'MATA';
  degree['Realschule'][1]  = 'MATSE';
  degree['Realschule'][2]  = 'FIAE';
  degree['Realschule'][3]  = 'BA Inf.';
  degree['Gymnasium']      = new Array ();
  degree['Gymnasium'][0]   = 'MATA';
  degree['Gymnasium'][1]   = 'MATSE';
  degree['Gymnasium'][2]   = 'FIAE';
  degree['Gymnasium'][3]   = 'BA Inf.';
  degree['Gymnasium'][4]   = 'MA Inf.';
  degree['Gymnasium'][5]   = 'Dipl. Inf.';
}

Die Schleife


function setPreferences(pref)
{
  ...
  for (var 0fields.lengthi++)
  {
    ...
  }
}

Erläuterung

Wer sich jetzt fragt, was das fields zu bedeuten hat, dem sei gesagt, dass wir diese Variable ja schon bei der Vorbereitung festgelegt haben (fields = document.getElementsByName('Ausbildung[]');). Wir haben also ein Array mit den Verweisen auf alle Checkboxen unter dem Punkt "Ausbildung".

Deaktivieren


for (var 0fields.lengthi++)
{
  if (!in_array (fields[i].valuedegree[pref]))
  {
    fields[i].disabled true;
    if (true == fields[i].checked)
    {
      fields[i].checked false;
    }
  }
}

Erläuterung

Mit unserer "Hilfsfunktion" in_array überprüfen wir nun, ob sich der Wert der jeweiligen Checkbox auch im entsprechenden "Unterarray" befindet, also zum Beispiel degree['Hauptschule']. Wenn dem also nicht so ist und wir ein false zurück geliefert bekommen, so wird die jeweilige Checkbox mit fields[i].disabled = true; deaktiviert. Und sollte sie schon markiert sein (if (true == fields[i].checked)), so wird auch noch das Attribut checked entfernt (fields[i].checked = false;).

Reaktivieren


if (!in_array (fields[i].valuedegree[pref]))
{
  ...
}
else
{
  fields[i].disabled false;
}

Erläuterung

Klickt nun jemand irrtümlicherweise zuerst auf "Realschule" und dann auf "Gymnasium", so bleibt die Deaktivierung bestehen. Um das zu vermeiden, entfernen wir die "Sperre" mittels fields[i].disabled = false;.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt