JS Filter bei MCM mit Ausweichotion

Question

Ich habe eigentlich schon viele JS programmiert, aber ich habe das Gefühl, dass die Ausweichoption das nicht so mitmacht wie ich möchte. Das is mein momentaner Ansatz (einer von vielen). Funktioniert auch, bis auf die Tatsache, dass wenn ich beide Kreuze gesetzt habe bei "Ja", und dann auf die Ausweichoption wechsel, die Textfenster nicht verschwinden:

<script type="text/javascript">
var optionA = document.getElementById("B003_01");  // Checkbox: Ja (MCM)
var optionB = document.getElementById("B003_02");  // Checkbox: Ja (MCM)
var optionC = document.getElementById("B003_R1");  // Ausweichoption Checkbox: Nein
var frage = document.getElementById("B004_qst");   // Textfeld 1
var frage2 = document.getElementById("B005_qst");  // Textfeld 2

function toggle() {
    if (optionC.checked)  {
      frage.style.display = "none";
      frage2.style.display = "none";
    } 
    
    if (optionA.checked) {
        frage.style.display = "";
      } else {
        frage.style.display = "none";
}
      
    if (optionB.checked) {
        frage2.style.display = "";
      } else {
        frage2.style.display = "none";
}
    }
  
  

// Ereignis-Handler registrieren
SoSciTools.attachEvent(optionA, "click", toggle);
SoSciTools.attachEvent(optionB, "click", toggle);
SoSciTools.attachEvent(optionC, "click", toggle);

// Initialzustand setzen
toggle();
</script>

Answer 1

Es handelt sich hier um ein Timing-Problem - genauer gesagt um die Reihenfolge, in welcher welches JavaScript ausgeführt wird.

HTML sieht es nicht vor, dass Checkboxen exklusiv sind. Also, dass die Ausweichoption nicht zusammen mit den anderen beiden Optionen gewählt werden kann. Diese Funktionalität rüstet SoSci Survey mittels JavaScript nach.

Nun wird das JavaScript von SoSci Survey aber erst nach dem Laden der Seite aktiviert, Ihres schon vorher. Das bedeutet, dass erst Ihr JavaScript läuft - da sind alle drei Optionen noch aktiviert - und dass erst im Anschluss daran die beiden Optionen abgewählt werden.

Die einfachste Lösung in Ihrem Fall: Verlassen Sie mit einem return die Funktion, wenn Option C gewählt ist oder stellen Sie diese Bedingung ans Ende der Funktion.

if (optionC.checked)  {
  frage.style.display = "none";
  frage2.style.display = "none";
  return;
} 

Alternativ könnten Sie Ihren Code erst verzögert laufen lassen, das ist in diesem gut überschaubren Fall aber komplizierter als die o.g. Lösungen.