✔ per dropdown andere Felder (checkboxen) ausgrauen / disablen

[nordlicht_68]

Hallo Forum,

ich baue zZ ein (Buchungs-) Formular welches auch mit query validiert wird, viele schöne Tips für Extrawürste habe ich u.a. hier im Forum gefunden und ich hoffe das ich durch meinen ersten Thread beim nächsten Problem auch weiterkomme.
Habe bereits vieles gesucht und gefunden, nur zur 100% Lösung hats es noch nicht gereicht.

Der Besucher soll u.a. die Anzahl der Anreisenden Personen (1-6 möglich) in einen Dropdownmenü auswählen müssen, danach richtet sich die Anzeige der verfügbaren Zimmer (die Personenabhängig sind) per Checkbox. Der besuche kann dann ein oder mehrere verfügbaren Zimmer per Checkbox wählen können. Die durch die Angabe der Personen nicht möglichen Zimmer (weil zu klein) sollen bitte nicht ausgeblendet, sondern die Checkboxabfrage ausgegraut sein. Diese soll verhindern dass ein Besucher ein Zimmer wählen kann, welches zu klein für die Anzahl der Reisenden ist.

Beim erstmaligen Aufruf des Formulares sind alle Zimmer (werden wohl sechs werden) per default ausgegraut (aber "sichtbar"), das dropdown menü zeigt "bitte wählen" oder sowas. Es darf jetzt noch keinen value haben, da sonst bei verfrühten "submit" die Validierung hier nicht zusschlagen kann.
Wählt der Besucher die Personenanzahl "1-4" werden alle Zimmer aktviert, bei "5" werden die zu kleinen wieder grau und bei "6" ist nur noch eines verfügbar.

Ob noch die Falle "entcodet" werden kann, wenn er zunächst 4 Personen angibt, daher alle Zimmer verfügbar sind, er eines der kleinen Zimmer anwählt und er aber danach doch auf 5 Mitreisenen wechselt und das angehakte, aber zu kleine Zimmer angehakt bleibt. (schöner wär es wenn sich das zu kleine Zimmer dann abhaken könnte).

Soviel zu Aufgabe

Gefunden habe ich zZ in diesem Thread:

http://www.tutorials.de/javascript-ajax/337373-dropdown-selektiert-checkbox.html

Eine Lösung über arryes, da werden die checkboxen aber nur an oder angehakt, bei mir sollen sie aktiv bzw. ausgegraut sein.

per Validation kann ich so etwas ausgrauen:

	var <beispielgruppe> = $("#<wenn dieses geklickt wurdee>")[inital ? "removeClass" : "addClass"]("gray");

Aber das hilft hier auch noch nicht so für sich alleine.

Jemand eine Idee? Wirds doch irgendwie sowas geben, aber habs trotz Nächte gesuche noch nicht gefunden.

Vielen Dank
gruss
sTEPHAN

 

[Maniac]

Warum fügst du da eine extra Klasse hinzu?
Du musst doch nur das Attribut des Feldes auf 'disabled="disabled"' setzen.

 

[nordlicht_68]

Hallo,

dann kann man mal sehen dass ich nicht mal dieses hinbekommen hätte , aber danke für diesen Hinweis. Der Code stammte von der Demo Seite der bassistance Validierung, ich dachte es hilft. Wenns einfacher ght, umso besser.

Nur geholfen ist mir leider damit noch nicht. Hier ist der HTML Teil des Formulares (Auschnitt) zur Verdeutlichung, was fehlt ist natürlich der Scriptteil der für das Disablen der jeweiligen Checkboxen sorgt.

<form>
  <p>
    <select name="Anzahl" onchange="********************">
      <option value="">- Wählen -</option>
      <option value="">1 Person</option>
      <option value="">2 Personen</option>
      <option value="">3 Personen</option>
      <option value="">4 Personen</option>
      <option value="">5 Personen</option>
      <option value="">6 Personen</option>
    </select>
  </p>
  <p>
    <input type="checkbox" name="zimm1" value="zimm1">Zimmer 1 (max. 4 Pers.)<br>
    <input type="checkbox" name="zimm2" value="zimm2">Zimmer 1 (max. 4 Pers.)<br>
    <input type="checkbox" name="zimm3" value="zimm3">Zimmer 1 (max. 4 Pers.)<br>
    <input type="checkbox" name="zimm4" value="zimm4">Zimmer 1 (max. 5 Pers.)<br>
    <input type="checkbox" name="zimm5" value="zimm5">Zimmer 1 (max. 6 Pers.)<br>
    <input type="checkbox" name="zimm6" value="zimm6">Zimmer 1 (max. 6 Pers.)
  </p>
</form>

 

[Maniac]

Eigentlich sollte das doch kein Problem sein

Was noch fehlt sind die Werte ('value') welche übergeben werden beim Select.

Am Einfachsten wäre es, du gibts deinen checkboxen verschiedene Klassen, welches die Anzahl der Personen beinhaltet:

class="person_4"
class="person_5"
class="person_6"

Beim selectieren der Dropdown kannst du nun den übergebenen Wert mit der Klasse vergleichen und die anderen deselktieren.
verwendest du jQuery?

 

[nordlicht_68]

Hallo Maniac

verwendest du jQuery?

Ja,

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>

wie beschrieben.

Bisher habe ich mir alles aus versch. Quellen, demos und Foren zusammengesucht, dabei kam schon ein gutes Formular heraus, mit Datum range (von/bis), nur Zahlen zulassen usw.

zZ in der Entstehungsphase zu betrachten hier: (bitte beachten dass es wirklich noch im Augfbau ist, Optisch und Codemässig wird noch einiges getan, Rahmen der Divs dienen zZ noch zur Übersicht und kommen natürlich später weg...


www.womo-kiel.de/myform/anfrage.html

Nach Klassen werde ich mich schlau lesen, und klar benötien die Input Values, aber wie vergleiche ich?

danke

 

[Maniac]

Ich würde es z.b. so machen:

<form>
  <p>
    <select name="Anzahl" id="personen">
      <option value="0">- Wählen -</option>
      <option value="1">1 Person</option>
      <option value="2">2 Personen</option>
      <option value="3">3 Personen</option>
      <option value="4">4 Personen</option>
      <option value="5">5 Personen</option>
      <option value="6">6 Personen</option>
    </select>
  </p>
  <p>
    <input type="checkbox" class="person_4" name="zimm1" value="zimm1">Zimmer 1 (max. 4 Pers.)<br>
    <input type="checkbox"  class="person_4" name="zimm2" value="zimm2">Zimmer 1 (max. 4 Pers.)<br>
    <input type="checkbox"  class="person_4" name="zimm3" value="zimm3">Zimmer 1 (max. 4 Pers.)<br>
    <input type="checkbox"  class="person_5" name="zimm4" value="zimm4">Zimmer 1 (max. 5 Pers.)<br>
    <input type="checkbox"  class="person_6" name="zimm5" value="zimm5">Zimmer 1 (max. 6 Pers.)<br>
    <input type="checkbox"  class="person_6" name="zimm6" value="zimm6">Zimmer 1 (max. 6 Pers.)
  </p>
</form>

Dann beim Change-Event des Selects prüfen wieviel Personen übergeben wurden.
Dann alle Zimmer welche Kleiner sind als die angebene Anzahl der Personen disablen.

Hier mal ein Denkansatz:

$('#personen').change(function(){
    var personen = $(this).val(); // value welches übergeben wurde
    /*
      Hier noch mit den Checkboxen weiterarbeten
   */
});

 

[Lime]

Hallo,

also sieht doch eh schon ganz gut aus, aber da fehlt dir denk ich irgendwo ein clear am Ende, weil der Reisezeit-Div nicht wirklich schön sitzt.
Ganz unten hast du ja Anreise, Abreise und Datum. Wofür ist das Datum? Soll da das aktuelle Datum eingegeben werden? Wenn ja, lass das weg und löse es über PHP im späteren Verlauf. Hier könnte ein Benutzer ein völlig falsches Datum eingeben, was total dämlich wäre aber macht ja keinen Sinn das den Benutzer machen zu lassen.

Nun zu deinem Problem. Zu allererst sollten wir dem Dropdown values verpassen:

<form>
  <p>
    <select name="Anzahl" id="anzPersonen">
      <option value="0">- Wählen -</option>
      <option value="1">1 Person</option>
      <option value="2">2 Personen</option>
      <option value="3">3 Personen</option>
      <option value="4">4 Personen</option>
      <option value="5">5 Personen</option>
      <option value="6">6 Personen</option>
    </select>
  </p>
  <p>
    <input type="checkbox" class="zimm4" name="zimm1" value="zimm1">Zimmer 1 (max. 4 Pers.)<br>
    <input type="checkbox" class="zimm4" name="zimm2" value="zimm2">Zimmer 1 (max. 4 Pers.)<br>
    <input type="checkbox" class="zimm4" name="zimm3" value="zimm3">Zimmer 1 (max. 4 Pers.)<br>
    <input type="checkbox" class="zimm5" name="zimm4" value="zimm4">Zimmer 1 (max. 5 Pers.)<br>
    <input type="checkbox" class="zimm6" name="zimm5" value="zimm5">Zimmer 1 (max. 6 Pers.)<br>
    <input type="checkbox" class="zimm6" name="zimm6" value="zimm6">Zimmer 1 (max. 6 Pers.)
  </p>
</form>

Dann noch ein schöner Javascript/jQuery-Code:

$(document).ready(function()
{
    $(".zimm4").attr("disabled", true);
    $(".zimm5").attr("disabled", true);
    $(".zimm6").attr("disabled", true);

    $("#anzPersonen").change(function()
    {
        $(".zimm4.").removeAttr("disabled");
        $(".zimm5.").removeAttr("disabled");
        $(".zimm6.").removeAttr("disabled");

        var anzPers = $(this).val();
        switch(anzPers)
        {
            case(anzPers == 0):
                $(".zimm4").attr("disabled", true);
                $(".zimm5").attr("disabled", true);
                $(".zimm6").attr("disabled", true);
                break;
            case(anzPers == 5):
                $(".zimm4").attr("disabled", true);
                break;
            case(anzPers == 6):
                $(".zimm4").attr("disabled", true);
                $(".zimm5").attr("disabled", true);
                break;
        }
    });
});

Okay, also ich habs nicht ausprobiert, aber passieren sollte folgendes:
- Wird das Dokument geladen, sind alle Zimmer mit den Klassen zimm4, zimm5, zimm6 deaktiviert.
- Wird die Select-Box geändert, werden alle Checkboxen aktiviert, allerdings wird sofort danach geprüft welcher Wert gewählt wurde. Bei 0 wird alles deaktiviert (das ist das "bitte wählen" Feld), bei 1-4 passiert nichts, bei 5 werden die zimm4-Klassen Elemente deaktiviert und bei 6 alle zimm4 und zimm5-Elemente.

€: Dein Ansatz war eh gut. Ich hab nur zu lang getippt... Bin selber kein Javascript/jQuery Profi, aber war interessant also hab ich mal bisschen nachgedacht.

Lg

 

[nordlicht_68]

Hallo Lime,

auch dir ein grosses Danke bisher.

Kurz eine schnelle Antwort:

Zu der Seite: Es ist bisher echt noch eine Baustelle, daher pasen noch nicht alle Felder zusammen, das zusätzliche Datum Feld war nur zum "spielen" und kommt natürlich wieder weg, und wenn alles fertig ist, wirds auch hübsher und passende Farben, Ramen usw, und wohl alles etwas kleiner.

Habe deinen code ausprobiert und muss sagen dass leider nichts geht, ausser die Auswahl. Es ist nicht disable bei aufruf und es wird auch nicht nach Auswahl disabled

siehe hier:

http://www.womo-kiel.de/myform/grau3.html

Ich suche gerade mal was da noch fehlen könnte.....

 

[Maniac]

Hast anscheinend keine Fehlerkonsole im Browser, aber macht nix

Er meckert die Zeile 18 an, dort stimmt die Zuweisung nicht ganz.
Ich denke es muss so heissen:

$('selector').attr('disabled','disabled');

und das bei allen wo dieses Attribut verwenden.

 

[Lime]

Ich habs mir eben angesehen und ausprobiert und ich komm auch nicht drauf.
Ich weiß nicht, welche Funktion nicht passt. Normalerweise müsste .attr('disabled', true) aber gehen... meint Google jedenfalls, wobei es da etliche Schreibweisen gibt. Naja vielleicht weiß jemand anderes weiter...

€: @Maniac: Das habe ich eben etliche Male probiert, funktioniert ebenfalls nicht. Google meinte es geht beides, "disabled" oder eben true.

Bis ich auf die Idee kam, jquery einzubinden... da hatte ich schon alles geändert gehabt. ^^