[jQuery] Gruppe von Checkboxen prüfen und Attribut ändern

[Gunther]

Hallo Selfgemeinde!

Aufgrund eines kleinen Mini-Projektes will auch ich mich mal näher mit jQuery beschäftigen. Leider sind schon meine Javascript Kenntnisse etwas eingerostet.

Ich habe mir also zunächst die aktuellste jQuery Version (1.2.6) runtergeladen und ebenfalls ein Checkbox Plugin (http://www.texotela.co.uk/code/jquery/checkboxes/), mittels dessen man u.a. Checkboxen mit gleichem Namen sich wie Radiobuttons verhalten lassen kann.

Das ist schon meine halbe Miete, denn ich habe X Blöcke mit jeweils den gleichen Optionen, von denen jede aber entweder gar nicht oder nur in einem Block ausgewählt sein darf.

Jetzt stehe ich aber vor dem Problem, dass ich gerne noch folgendes machen würde:
Bei jeder Veränderung der Checkboxen soll geprüft werden, ob jeweils aus einer Gruppe gleichnamiger Checkboxen eine ausgewählt ist oder nicht. Ist eine ausgewählt, sollen die anderen Checkboxen aus der Gruppe bspw. disabled werden.

Aufgrund des o.g. Plugins haben die Checkboxen einer Gruppe alle den gleichen Namen (name), aber ich habe bspw. noch das ID-Attribut zur freien Verfügung.

Könnte mir bitte jemand erklären, wie ich diese Überprüfung realisieren kann, und dann die 'gecheckte' Checkbox aus dieser Gruppe ausnehmen kann?

Vielen Dank für eure Hilfe!

Gruß Gunther

[molily]

Hallo,

Bei jeder Veränderung der Checkboxen soll geprüft werden, ob jeweils aus einer Gruppe gleichnamiger Checkboxen eine ausgewählt ist oder nicht. Ist eine ausgewählt, sollen die anderen Checkboxen aus der Gruppe bspw. disabled werden.

Allen Checkboxen einen change-Handler geben:
 Wenn Checkbox checked ist:
   input[name=namedergeändertencheckbox]:checked suchen
   gegenwärtige Checkbox aus der Liste ausschließen (not)
     Elemente in der Liste auf disabled setzen

Aufgrund des o.g. Plugins haben die Checkboxen einer Gruppe alle den gleichen Namen (name), aber ich habe bspw. noch das ID-Attribut zur freien Verfügung.

Hm? Wozu meinst du das zu brauchen?

Mathias

[Gunther]

Hallo Mathias!

Allen Checkboxen einen change-Handler geben:
Wenn Checkbox checked ist:
   input[name=namedergeändertencheckbox]:checked suchen
   gegenwärtige Checkbox aus der Liste ausschließen (not)
     Elemente in der Liste auf disabled setzen

Danke für den Hinweis. Ich habe es jetzt auch tatsächlich hinbekommen, allerdings nur dadurch, dass ich das Plugin selber entsprechend abgeändert habe, denn so ganz verstanden habe ich das (die jQuery Syntax) noch nicht.

Frage: Gibt es irgendwo im Netz auch ein "vernünftiges" Einsteigertutorial?
Die ganzen Links auf der jQuery Seite sind ja mehr oder weniger alles Einzelbeispiele und kein richtiges Tutorial. Oder wie "erlernt" man den Einsatz und den Umgang mit jQuery am besten?

Aufgrund des o.g. Plugins haben die Checkboxen einer Gruppe alle den gleichen Namen (name), aber ich habe bspw. noch das ID-Attribut zur freien Verfügung.

Hm? Wozu meinst du das zu brauchen?

Hmmm ..., stammt wohl von einer stark durch CSS geprägten Denkweise ab. ;-)

Gruß Gunther

[molily]

Hallo,

Frage: Gibt es irgendwo im Netz auch ein "vernünftiges" Einsteigertutorial?

Hehe. Du weißt, was ich von Frameworks halte und warum? ;)

Oder wie "erlernt" man den Einsatz und den Umgang mit jQuery am besten?

Na, soviele Elemente von jQuery musst du für die üblichen Aufgabe nicht kennen.

• $("Selektor") ist die Grundfunktion, mit der du Elemente auswählst, mit denen du dann irgendwelche Operationen vornimmst. Zurückgegeben wird eine Knotenliste. Alle weiteren jQuery-Funktionen arbeiten mit dieser Knotenliste.
• Als Selektoren stehen die üblichen CSS-Selektoren zu Verfügung, aber auch Zusätze wie :checked, die den Status von Formularfeldern wiedergeben (vereinfacht gesagt).
• Die Knotenlisten kann man auf verschiedene Weise durchlaufen und Änderungen vornehmen (Traversing genannt). Wie z.B. einen Eintrag löschen mit not().
• Event-Handler kannst du über die Shortcut-Funktionen registrieren, z.B. change() für das change-Ereignis.
• HTML-Attribute kann man über attr() setzen und auslesen. (Ist nicht immer notwendig, wenn man zufällig einen Elementknoten direkt greifen kann. Hilft nur bei einigen IE-Problemen.)
• Den Zusammenhang dieser Einzelfunktionen gewährleistet das Chaining: $("...").x().y().z(). Da arbeitet man immer mit dem Rückgabewert der zuletzt aufgerufenen Funktion weiter. Das ist eben eine geänderte Knotenliste oder dieselbe, mit dessen Elementen Operationen durchgeführt wurden.

Wenn du möchtest, kann ich dir mal die Funktion jQuery.radioCheckboxGroup erklären. Dort hast du vermutlich einfach this.checked = false; auf this.disabled = true gesetzt, oder? (Wie wirst du das wieder los, wenn die Checkbox abgewählt wird?)

Mathias

[Gunther]

Hallo,

danke für die Erklärungen - die helfen mir weiter, als alles, was ich bisher so gefunden/ gelesen habe.

Wenn du möchtest, kann ich dir mal die Funktion jQuery.radioCheckboxGroup erklären. Dort hast du vermutlich einfach this.checked = false; auf this.disabled = true gesetzt, oder? (Wie wirst du das wieder los, wenn die Checkbox abgewählt wird?)

Fast ... ;-)
Folgendes habe ich gemacht:

  
if(this.checked == true) {  
 // uncheck every other box with the same name  
 x.not(this).each(  
  function()  
  {  
   this.checked = false;  
   this.disabled = true;  
  }  
 ).end();  
}  
else {  
 // uncheck every other box with the same name  
 x.not(this).each(  
  function()  
  {  
   this.checked = false;  
   this.disabled = false;  
  }  
 ).end();  
}  

Erfüllt immerhin seinen Zweck.

Die Funktion als solches habe ich (glaube ich zumindest) auch verstanden. Ich tue mich nur noch ein bischen schwer mit der Syntax, beim Versuch eigene Sachen/ Funktionen zu schreiben.

Als nächstes würde ich die Funktion gerne noch so abändern, dass ich nicht für jede Checkbox-Gruppe einen eigenen Funktionsaufruf mit dem Namen brauche, sondern einen Filter verwenden (o.ä.) kann (bspw. einen bestimmten Classname oder so etwas) und sich die Funktion dann den Namen selber holt (this.attr('name')).

Für weitere Hilfe & Tipps wäre ich dir sehr dankbar.

Gruß Gunther