JS, radio buttons zählen und deaktivieren

[owieortho]

Moin,

Ich habe eine Matrix mit radio buttons. Spaltenweise mit identischem Namen, dort kann, wie üblich, immer nur ein radio button ausgewählt werden. Zeilenweise habe ich identische class-Namen vergeben. Jetzt möchte ich, dass in einer Zeile (verschiedene Namen, gleiche Klassen) maximal zwei buttons ausgewählt werden können. Die restlichen sollen beim auswählen eines zweiten buttons in einer Zeile dynamisch auf disabled gesetzt werden.

Beispiel ist hier: https://jsfiddle.net/5ywcL8e1/

Habe keine zündende Idee, dies umzusetzen. Schon mal danke für's Mitknobeln
O.

 

[helge07]

maximal zwei buttons ausgewählt werden können. Die restlichen sollen beim auswählen eines zweiten buttons in einer Zeile dynamisch auf disabled gesetzt werden

1. Heisst das, dass nur einer (und nicht zwei) gleichzeitig selektiert sein können?
2. Implementieren könnte man das Verhalten über Händler für onClick-Ereignisse (wenn geklärt ist, was gewollt ist).

 

[owieortho]

1. Heisst das, dass nur einer (und nicht zwei) gleichzeitig selektiert sein können?

im genannten fiddle ist zu sehen:

• pro Spalte ist nur ein Radiobutton auswählbar. Das ist Standardverhalten und so gewünscht.
• Da es sich um mehrere Spalten mit unterschiedlichem Namen handelt, kann standardmäßig in jeder Spalte dieselbe Zeile ausgewählt werden (bspw. alle Termine 8:00 - 9:00). Das soll nicht möglich sein. Sobald in zwei Spalten die gleiche Zeit gewählt wird, soll diese Zeit (Zeile) für alle anderen Spalten disabled werden. Somit könnten niemals drei oder mehr Gruppen denselben Zeitslot wählen.

Verständlich?

Gruß, O.

 

[helge07]

O.K., dann ist die Aufgabenstellung klar. Eine quick&dirty-Lösung wäre, an jeden Radiobutton einen onClick-Handler anzuhängen, der alle anderen Radiobuttons dieser Zeile ausschaltet. Möglicherweise kennen die JavaScript-Spezialisten elegantere Lösungen.

 

[owieortho]

O.K., dann ist die Aufgabenstellung klar. Eine quick&dirty-Lösung wäre, an jeden Radiobutton einen onClick-Handler anzuhängen, der alle anderen Radiobuttons dieser Zeile ausschaltet. Möglicherweise kennen die JavaScript-Spezialisten elegantere Lösungen.

Aber vorher muss gezählt werden, wieviele radio buttons in dieser Zeile geklickt sind. Noch keiner oder einer, dann noch nicht deaktivieren, andernfalls schon.
Da die radio buttons in einer Zeile alle denselben class-Namen haben, sollte sie über getElementByClassName adressierbar sein, aber wie weiter?

O.

 

[helge07]

Aber vorher muss gezählt werden,

Warum? Der Handler, der durch den Click aktiviert wird, kennt seinen Spalten- und Zeilenindex (über den Wert von class und name des target) und kann dann alle mit gleichem class-Wert und unterschiedlichem Name-Wert deaktivieren.
Oder habe ich da etwas missverstanden?

 

[owieortho]

... kann dann alle mit gleichem class-Wert und unterschiedlichem Name-Wert deaktivieren...

Er darf erst dann deaktivieren, wenn er der zweite mit identischem class- und unterschiedlichem name-Wert ist. Eine Zeile muss leer sein dürfen bzw. ein oder zwei ausgewählte buttons haben. Erst wenn zwei buttons in einer Zeile ausgewählt sind, soll der Rest deaktiviert werden.
Zum besseren Verständnis mal das Ganze animiert:


Danke und Gruß,
O.

 

[helge07]

O.K. dann hatte ich das falsch verstanden.

Die obige Animation zeigt dann wohl weiß erlaubte Tabellenzustände an und in der zuletzt erreichten Konfiguration verbotene Zustände in der zweiten und vorletzten Zeile. (Die aber gleichzeitig nicht auftreten können, wenn bei mehr als zwei Aktivierungen die restlichen Buttons einer Zeile sofort deaktiviert werden).

Der Lösungsansatz ist dann immer noch der gleiche: Jeder Radiobutton muss einen onClick-Handler aktivieren, der die Zustände aller Buttons seiner Zeile überprüft und falls schon zwei selektiert sind alle anderen in ihr deaktiviert. Aber: Was soll passieren, wenn eine Zeile zwei aktivierte Radiobuttons enthält (und die anderen deaktiviert sind) und dann einer dieser beiden Radiobuttons deselektiert wird, weil in seiner Spalte ein anderer angeklickt wurde?

 

[owieortho]

dann sollen die deaktivierten buttons und der gerade deselektierte aktiviert werden und wieder zur Auswahl stehen. Quasi der Zustand vor Auswahl eines zweiten Buttons in einer Reihe.

 

[helge07]

Die Änderung eines Radiobutton kann sich somit nicht nur in der eigenen Zeile auswirken, sondern möglicherweise auch in jeder anderen. Vorschlag: ein gemeinsamer onClick-Handler für alle Radiobuttons, der dann aber die ganze Tabelle repariert. Leider immer noch quick&dirty.

 

[owieortho]

OK, was das Javascript prinzipiell machen soll, war schon klar. Jetzt braucht es ein paar Zeilen JS. Anyone?

Danke,
O.

 

[Myhar]

Hast du selber überhaupt schon etwas probiert? Wenn ja, wie schaut das aus? Ein "ich brauch mal" zeugt für mich nicht dafür dass man sich selber Gedanken gemacht hat

 

[owieortho]

Hast du selber überhaupt schon etwas probiert? Wenn ja, wie schaut das aus? Ein "ich brauch mal" zeugt für mich nicht dafür dass man sich selber Gedanken gemacht hat

ohne meine bisherigen Ansätze wäre ich nicht schon auf getElementByClassname gekommen. Ich habe allerdings die verschiedenen Sackgassen nicht dokumentiert, vielleicht jetzt ein Fehler. JS ist nicht meine alltägliche Sprache und daher fehlen mir wahrscheinlich einige Selbstverständlichkeiten, die für einen erprobten JS-Entwickler tägliches Brot sind.

 

[Myhar]

Und helge07 hat dir schon den ersten Ansatz geliefert. Was hast du mit onclick event handler probiert? Damit musst du nämlich anfangen.

Ob du es jetzt mit <input type="radio" onclick="..."> oder mit document.querySelector('.[type=radio]').forEach(radio => {radio.addEventListener('click', ...)} ); machst ist dir überlassen (variante zwei ist schöner, da es dynamischer ist, aber Variante 1 ist eventuell auch ausreichend)