Checkboxen -> Auswertung nach Kriterien

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

sveka

Mitglied
26 Mai 2006
166
1
18
34
Hallo, ich habe ein kleines Problem bzw. einen Denkfehler und bräuchte einen Denkanstoß. :)

Ich habe folgende Ausgangssituation.

Ich habe eine Auswahl von Checkboxen (diese stellen Hauptkategorien dar). Wenn man hier eine oder mehrere anklickt, rufe ich per Ajax die dazugehörigen Unterkategorien auf und gebe diese abermals als Checkboxen aus.

Nun möchte ich folgendes erreichen.

Wenn jemand eine Hauptkategorie OHNE eine dazugehörige Unterkategorie gewählt hat, möchte ich das mir die dazugehörige ID (welche als value dahinterliegt) ausgegeben wird.

Sollte aber jemand aber mind. 1 Unterkategorie gewählt haben, möchte ich das mir alle IDs der Unterkategorie mitgegeben werden und die Oberkategorie nicht mehr beachtet wird im weiteren Verlauf.

Hat jemand eine Idee wie ich dies am einfachsten realisieren kann?

Vielen lieben Dank.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.456
466
83
68
Ich versuche mal, eine Lösung zu skizzieren:
Bei jeder Unterkategorie die ID der Hauptkategorie als data-Attribut hinterlegen.
Wird eine Unterkategorie geändert, entweder gecheckt oder unchecked, alle Unterkategorien prüfen, ob mindestens eine gecheckt ist. In dem Fall die Hauptkategorie auf disabled setzen.

Wobei ich dies hier:
möchte ich das mir die dazugehörige ID (welche als value dahinterliegt) ausgegeben wird.
so verstehe, dass sie nach dem Abschicken des Formulars als GET- oder POST-Parameter zur Verfügung steht. Oder ist das wörtlich zu verstehen, dass die ID auf der Seite ausgegeben werden soll?
 

sveka

Mitglied
26 Mai 2006
166
1
18
34
so verstehe, dass sie nach dem Abschicken des Formulars als GET- oder POST-Parameter zur Verfügung steht. Oder ist das wörtlich zu verstehen, dass die ID auf der Seite ausgegeben werden soll?
Ja, genau. Als POST-Parameter. Danke für deinen Ansatz. Ich werde ihn im Laufe des Tages testen.
 

sveka

Mitglied
26 Mai 2006
166
1
18
34
Hallo, ich habe mich mit JavaScript einfach gestritten^^. Aktuell rufe ich meine gewünschten Unterkategorien per AJAX wie folgt auf.

Javascript:
/* Abfrage nach Kategorien */
$('input[name="kategorie[]"]').change(function(){
    let cbvals = [];
    $('.form-check-input').each((idx, item) => {
        if (item.checked) cbvals.push(item.value);
    });
    console.log(cbvals);

/* Unterkategorien per AJAX holen */
$.ajax({
   url:"ajax/select_u_kategorien.php",
   method:"POST",
   dataTyp: "json",
   data:{query:cbvals},
        success:function(data)
        {
            $('#unterkategorie_ausgabe').html(data);
        }
  });
});

Wie kann ich jetzt mit JQuery die Checkbox der Kategorie (insofern eine zugeordnete Unterkategorie gewählt wurde) disabled setzen?

Ich würde per dataAttribut den Unterkategorien die ID der Kategorie mitgeben.

Dann müsste ich diese ja im Request mit dabei haben. Aber wie greife ich dann darauf zu um die Checkbox der Kategorie auf disabled zu setzen um sie gar nicht erst per POST zu übermitteln?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.456
466
83
68
Angenommen das HTML, das Du durch das Ajax generierst, sieht im Prinzip so aus:
Code:
    <form>
        <input type="checkbox" id="kat1" name="kat1" data-class-subkat="subkat1">
        <input type="checkbox" name="subkat1.1" class="subkat1" data-id-kat="kat1">
        <input type="checkbox" name="subkat1.2" class="subkat1" data-id-kat="kat1">
        <input type="checkbox" name="subkat1.3" class="subkat1" data-id-kat="kat1">
        <input type="checkbox" name="subkat1.4" class="subkat1" data-id-kat="kat1">
        <br>
        <input type="checkbox" id="kat2" name="kat2" data-class-subkat="subkat2">
        <input type="checkbox" name="subkat2.1" class="subkat2" data-id-kat="kat2">
        <input type="checkbox" name="subkat2.2" class="subkat2" data-id-kat="kat2">
        <input type="checkbox" name="subkat2.3" class="subkat2" data-id-kat="kat2">
        <input type="checkbox" name="subkat2.4" class="subkat2" data-id-kat="kat2">
    </form>
Dann kannst Du mit diesem Javascript die Oberkategorie auf "disabled" setzen wenn mindestens eine Checkbox der Unterkategorien gecheckt ist oder aktivieren, wenn keine gecheckt ist:
Code:
        // Eventlistener fuer Aenderungen im Formular registrieren:
        document.querySelector('form').addEventListener('input', event => {
            // Handelt es sich um eine Checkbox fuer eine Unterkategorie?
            // Das ist der Fall, wenn sie ein data-Attribut mit dem Namen "data-id-kat" hat.
            if (event.target.dataset.idKat) {
                // Alle gecheckten Checkboxes fuer die Unterkategorien,
                // die gecheckt sind, bereit stellen:
                const gecheckt = document.querySelectorAll('[data-id-kat="' + event.target.dataset.idKat + '"]:checked');
                // Ist keine gecheckt: Checkbox fuer die Hauptkategorie aktivieren:
                const cbKat = document.querySelector('#' + event.target.dataset.idKat);
                if (gecheckt.length == 0) {
                    cbKat.disabled = false;
                } else {
                    // Mindestens eine Checkbox ist gecheckt
                    // Checkbox fuer Kategorie deaktivieren:
                    cbKat.disabled = true;
                }
            }
        });
Edit: Aus Gewohnheit habe ich kein jQuery genommen, Du kannst es problemlos umändern, wenn dir jQuery lieber ist.
 

sveka

Mitglied
26 Mai 2006
166
1
18
34
Vielen lieben Dank. Dies funktioniert wunderbar. Selbst wenn es zu einer Unterkategorie noch eine weitere Unterkategorie gibt. Konnte mir das Skript gut anpassen. Vielen Dank.