Forms disabled="disabled" altenative

[Gunnar Bittersmann]

@@The Joker:

nuqneH

ich habe ein Formular, dass zwei Radiobuttons mit den Möglichkeiten A und B besitzt.
Ich möchte jetzt, dass man wenn a ausgewählt wird, sofort darunter die zugehörigen Checkboxen a1,a2,a3 erscheinen, ohne dass die Seite neu geladen muss. Bei B soll dann b1,b2,b3 erscheinen. Das einzige was ich finde, ist ist disabled=disabled und document.write.

Nein, 'document.write()' ist verkehrt; damit kannst du nichts nachträglich im bestehenden Dokument verändern.

Damit dein Formular auch ohne JavaScript funktioniert, müssen erstmal alle Checkboxen im Markup stehen. Das sollte in etwa so aussehen:

<form action="">  
  <fieldset>  
    <legend>Auswahl</legend>  
    <input type="radio" name="select" value="A" id="A"/><label for="A">A</label>  
    <input type="radio" name="select" value="B" id="B"/><label for="B">B</label>  
    <fieldset id="optionsA">  
      <legend>Optionen für A</legend>  
      <input type="checkbox" name="optionA" value="A1" id="A1"/><label for="A1">A1</label>  
      <input type="checkbox" name="optionA" value="A2" id="A2"/><label for="A2">A2</label>  
      <input type="checkbox" name="optionA" value="A3" id="A3"/><label for="A3">A3</label>  
    </fieldset>  
    <fieldset id="optionsB">  
      <legend>Optionen für B</legend>  
      <input type="checkbox" name="optionB" value="B1" id="B1"/><label for="B1">B1</label>  
      <input type="checkbox" name="optionB" value="B2" id="B2"/><label for="B2">B2</label>  
      <input type="checkbox" name="optionB" value="B3" id="B3"/><label for="B3">B3</label>  
    </fieldset>  
    <p><button type="submit">OK</button></p>  
  </fieldset>  
</form>

Für den gewünschten Effekt sollte gar kein JavaScript erforderlich sein, sondern nur CSS: Für nicht selektierte Radiobuttons [CSS3-SELECTORS §6.6.4, §6.6.7] blendet man per Geschwisterselektor [CSS3-SELECTORS §8.3.2] die entsprechende Checkboxengruppe aus:

#A:not(:checked)~#optionsA { display: none }  
#B:not(:checked)~#optionsB { display: none }

Funktioniert im Firefox 3.5.5, nicht aber in Webkits, Opera (warum eigentlich nicht?) und IE (warum überrascht mich das nicht?).

Also doch per JavaScript. Die Checkboxengruppen werden per Nachfahrenselektor nur ausgeblendet, wenn JavaScript aktiviert ist. Dazu dem 'html'-Element [PERFORMANCE-BP2] bzw. 'body'-Element [Cheatah] eine Klasse "js" geben und mit Nachfahrenselektor ausblenden.

Beim Click auf die Radiobuttons ändert man die Klasse des Formulars und blendet die entsprechende Checkboxengruppe ein.

document.documentElement.className += " .js";  
document.getElementById("A").onclick = function () { this.form.className = "selectedA"; };  
document.getElementById("B").onclick = function () { this.form.className = "selectedB"; };

Im Stylesheet:

.js #optionsA, .js #optionsB { display: none }  
.js .selectedA #optionsA { display: block }  
.js .selectedB #optionsB { display: block }

Qapla'

PS: Eigentlich sollte schon beim Aufrufen der Seite ein Radiobutton angewählt sein: [icke]