✔ per dropdown andere Felder (checkboxen) ausgrauen / disablen

nordlicht_68 · 30. Mai 2012

Problem gefunden: liegt an einem zuvielen Punkt, den hat die Fehlerconsole auch nicht verraten:

zB.

Code:

       $(".zimm4.").removeAttr("disabled");

geändert in

Code:

        $(".zimm4").removeAttr('disabled');

Zweiter Punkt nach ".zimm4" weg. es ****t!

Habe noch den Value von "bitte Angeben" herausgenommen (die "0") damit die validierung ****t und nich dann schon einen Wert hat. Geht trotzdem.

liegt nun hier (neue Name!):
http://www.womo-kiel.de/myform/grau31.html

Hier nun nochmal komplett:

HTML:

<script type="text/javascript">

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

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

    });
});

</script>
</head>


<body>

<form>
  <p>
    <select name="Anzahl" id="anzPersonen">
      <option selected="selected" value="">- 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 disabled="disabled" class="zimm4" name="zimm1" value="zimm1" type="checkbox">Zimmer 1 (max. 4 Pers.)<br>
    <input disabled="disabled" class="zimm4" name="zimm2" value="zimm2" type="checkbox">Zimmer 1 (max. 4 Pers.)<br>
    <input disabled="disabled" class="zimm4" name="zimm3" value="zimm3" type="checkbox">Zimmer 1 (max. 4 Pers.)<br>
    <input disabled="disabled" class="zimm5" name="zimm4" value="zimm4" type="checkbox">Zimmer 1 (max. 5 Pers.)<br>
    <input disabled="disabled" class="zimm6" name="zimm5" value="zimm5" type="checkbox">Zimmer 1 (max. 6 Pers.)<br>
    <input disabled="disabled" class="zimm6" name="zimm6" value="zimm6" type="checkbox">Zimmer 1 (max. 6 Pers.)
  </p>
</form>



</body></html>

Vielen tausend Dank!!

nordlicht_68 · 30. Mai 2012

Das haben wir dann wohl beide gleichzeitig gefunden ;-)

Nochmals vielen Dank!

Ich möchte die Schrift neben den Checkboxen auch noch Grau machen um es auffälliger anzuzeigen, aber das kommt noch.

STEPHAN

nordlicht_68 · 31. Mai 2012

Hallo nochmal,

also das mit der Schrift neben dem Checkboxen ist ja auch nich so einfach wie gedacht. Hat evt. noch jemand einen Tip und Hilfe für mich?

Ich habe den Text neben den Checkboxen natürlich als Label geschrieben damit man auch darauf klicken kann. Wie kann ich nun eine Classe devinieren um die Schrift d.h. das Label auch deutlich zu "disablen", d.h. diese per css anders zu gestalten wenn die Checkbox diabled ist?

Die inzwischen etwas ausgehübschte Datei liegt immer noch unter

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

und der code sieht nun so aus:

HTML:

<script type="text/javascript">

$(document).ready(function()
{
    $(".womo4").attr('disabled','disabled');
    $(".womo5").attr('disabled','disabled');
    $(".womo6").attr('disabled','disabled');

    $("#anzPersonen").change(function()
    {
        $(".womo4").removeAttr('disabled');
        $(".womo5").removeAttr('disabled');
        $(".womo6").removeAttr('disabled');
        var anzPers = $(this).val();
        switch(true)
        {
            case(anzPers == 0):
                 $(".womo4").attr('disabled','disabled');
			     $(".womo5").attr('disabled','disabled');
   				 $(".womo6").attr('disabled','disabled');
                break;
            case(anzPers == 5):
   				 $(".womo4").attr('disabled','disabled');
                break;
            case(anzPers == 6):
   				 $(".womo4").attr('disabled','disabled');
   				 $(".womo5").attr('disabled','disabled');
                break;
        }

    });
});

</script>

<style type="text/css">

p
		{
		font-family: Verdana, Arial, Helvetica, sans-serif;
   		text-decoration:none;
   		font-size: 12px;
   		color: red;
   		text-align:left;
   		margin-bottom:3px;
   		}

</style>
</head>
<body>

<form id="Form">
  <p>
    <select name="Anzahl" id="anzPersonen">
      <option selected="selected" value="">- 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 disabled="disabled" class="womo4" name="womo1" id="womo1" value="Flash S1" type="checkbox"/>
    			<label for="womo1">Flash S1 (max. 4 Pers.)</label><br>
    <input disabled="disabled" class="womo4" name="womo2" id="womo2" value="Flash 01" type="checkbox">
    			<label for="womo2">Flash 01 (max. 4 Pers.)</label><br>
    <input disabled="disabled" class="womo5" name="womo3" id="womo3" value="Flash 22" type="checkbox">
    			<label for="womo3">Flash 22 (max. 5 Pers.)</label><br>
    <input disabled="disabled" class="womo6" name="womo4" id="womo4" value="Flash 03" type="checkbox">
    			<label for="womo4">Flash 03 (max. 6 Pers.)</label><br>
    <input disabled="disabled" class="womo6" name="womo5" id="womo5" value="Flash 13" type="checkbox">
    			<label for="womo5">Flash 13 (max. 6 Pers.)</label>
  </p>
</form>

<label id="label1">

</body></html>

Nochmals vielen Dank

gruss
STEPHAN

Lime · 31. Mai 2012

Du kannst glaub ich mit

Javascript:

$(".element").addClass("classname");
$(".element").removeClass("classname");

arbeiten, allerdings habe ich das bisher nur auf Elemente angewendet, bei denen ich eine eindeutige ID verwendet habe. Ich bin mir nicht sicher, ob das auch bei class-Elementen funktioniert.

Die Klasse, die du hinzufügst und löscht, sollte halt eine ausgebleichte Schrift enthalten.

Maniac · 31. Mai 2012

Lime hat gesagt.:
Du kannst glaub ich mit

Javascript:

$(".element").addClass("classname"); $(".element").removeClass("classname");

arbeiten, allerdings habe ich das bisher nur auf Elemente angewendet, bei denen ich eine eindeutige ID verwendet habe. Ich bin mir nicht sicher, ob das auch bei class-Elementen funktioniert.

Die Klasse, die du hinzufügst und löscht, sollte halt eine ausgebleichte Schrift enthalten.

Ja es funktioniert, es wird dann als 2.,3. oder mehreres Klassenelement angehängt.

Hierbei wäre jedoch ein andere angehensweise eventuell besser.
Ich hab jetzt hier im jQuery das ".css()" verwendet, du kannst natürlich auch "addClass()" verwenden.

HTML:

<script type="text/javascript">

$(document).ready(function()
{
    $(".womo4").attr('disabled','disabled');
    $(".womo5").attr('disabled','disabled');
    $(".womo6").attr('disabled','disabled');
    $("#Form label").css('color',"#c6c6c6");

    $("#anzPersonen").change(function()
    {
        $(".womo4").removeAttr('disabled');
        $(".womo5").removeAttr('disabled');
        $(".womo6").removeAttr('disabled');
        
        $("#Form label").css('color', '#ff0000');
        
        var anzPers = $(this).val();
        switch(true)
        {
            case(anzPers == 0):
                 $(".womo4").attr('disabled','disabled');
                 $(".womo5").attr('disabled','disabled');
                 $(".womo6").attr('disabled','disabled');
                 $("#Form label").css('color',"#c6c6c6");
                break;
            case(anzPers == 5):
                 $(".womo4").attr('disabled','disabled');
                 $(".womo4 + label").css('color', '#c6c6c6');
                break;
            case(anzPers == 6):
                 $(".womo4").attr('disabled','disabled');
                 $(".womo5").attr('disabled','disabled');
                 $(".womo4 + label, .womo5 + label").css('color', '#c6c6c6');
                break;
        }

    });
});

</script>

<style type="text/css">

p
        {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        text-decoration:none;
        font-size: 12px;
        color: red;
        text-align:left;
        margin-bottom:3px;
        }

</style>
</head>
<body>

<form id="Form">
  <p>
    <select name="Anzahl" id="anzPersonen">
      <option selected="selected" value="">- 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 disabled="disabled" class="womo4" name="womo1" id="womo1" value="Flash S1" type="checkbox"/>
                <label for="womo1">Flash S1 (max. 4 Pers.)</label><br>
    <input disabled="disabled" class="womo4" name="womo2" id="womo2" value="Flash 01" type="checkbox">
                <label for="womo2">Flash 01 (max. 4 Pers.)</label><br>
    <input disabled="disabled" class="womo5" name="womo3" id="womo3" value="Flash 22" type="checkbox">
                <label for="womo3">Flash 22 (max. 5 Pers.)</label><br>
    <input disabled="disabled" class="womo6" name="womo4" id="womo4" value="Flash 03" type="checkbox">
                <label for="womo4">Flash 03 (max. 6 Pers.)</label><br>
    <input disabled="disabled" class="womo6" name="womo5" id="womo5" value="Flash 13" type="checkbox">
                <label for="womo5">Flash 13 (max. 6 Pers.)</label>
  </p>
</form>

<label id="label1">

</body></html>

nordlicht_68 · 31. Mai 2012

Moin Lime,

wow, super, klasse - vielen Dank!

Kam da bisher nicht zu deine Vorschläge auszuprobieren aber den zweiten habe ih nun aufgenommren und es funitioniert genau so wie vorgestellt und ist für die Zukunft einfach erweiterbar (wenn andere Womos hinzukommen).

Einen letzten Punkt hätte ich noch, bekomme ich evt. selber hin, aber evt. hast du die Idee weil du gerade drinsteckts:

Das ganze soll ja Falschangaben des Benutzers verhindern (er darf z.B. kein 4´er Womo wählen können, wenn er mit 5 Leuten unterwegs sein möchte).

Nun wählt er aber zB. zuerst in dropdown 4 Mitreisende aus, dazu eine checkbox Womo für vier leute max., wählt dann aber doch in dropdown 5 Mitreisende aus, die Checkboxen der Womos für 4 Leute werden diabled, aber die evt. angekakte checkBox bleibt angehakt und wir somit übermittelt. Da sie ja zZ disabled ist, kann der Anwender auch gar nicht mehr un-checken.

Ich benötige daher noch beim diableln der boxen den Auftrag nicht nur die boxen zu disablen (und neu die Class zu ändern), sondern auch un-zuchecken.
Das disablen aller Boxen am Anfang kann m.E. so bleiben, bin mir aber noch nicht sicher, aber wenn der Weg klatr ist, ist es ja auch einfach so zu machen.

Wenn du also dafür noch eine Idee hast, wäre es das "i" Tüpfelchen. Um checkboxn zu checken bzw un-zuchecken ist ja zB hier
http://www.tutorials.de/javascript-ajax/337373-dropdown-selektiert-checkbox.html
erklärt.

gruss
sTEPHAN

Maniac · 31. Mai 2012

Javascript:

$('.womo4').attr('checked','checked');
$('.womo4').removeAttr('checked');

Lime · 31. Mai 2012

Ich würde Maniacs Funktionen einfach in die .change() mit rein nehmen.
Die 2. Variante, .attr('checked','checked'); brauchst du aber eh nicht, da das normal über HTML funktioniert...

Javascript:

$(document).ready(function()
{
    $(".womo4").attr('disabled','disabled');
    $(".womo5").attr('disabled','disabled');
    $(".womo6").attr('disabled','disabled');
    $("#Form label").css('color',"#c6c6c6");

    $("#anzPersonen").change(function()
    {
        $(".womo4").removeAttr('disabled');
        $(".womo5").removeAttr('disabled');
        $(".womo6").removeAttr('disabled');
        //alle checkboxen "unchecken"
        $(".womo4").removeAttr('checked');
        $(".womo5").removeAttr('checked');
        $(".womo6").removeAttr('checked');
        
        $("#Form label").css('color', '#ff0000');
        
        var anzPers = $(this).val();
        switch(true)
        {
            case(anzPers == 0):
                 $(".womo4").attr('disabled','disabled');
                 $(".womo5").attr('disabled','disabled');
                 $(".womo6").attr('disabled','disabled');
                 $("#Form label").css('color',"#c6c6c6");
                break;
            case(anzPers == 5):
                 $(".womo4").attr('disabled','disabled');
                 $(".womo4 + label").css('color', '#c6c6c6');
                break;
            case(anzPers == 6):
                 $(".womo4").attr('disabled','disabled');
                 $(".womo5").attr('disabled','disabled');
                 $(".womo4 + label, .womo5 + label").css('color', '#c6c6c6');
                break;
        }

    });
});

nordlicht_68 · 31. Mai 2012

Hallo,

.. ich bin begeistert! Vielen tausend dank! Es läuft nun auch mit clearen des checkes bei Abwahl.

Wenn du mal ein Wohnmobil benötigst meldest du dich, gibt supersonderangebot ;-)

Hier nun nochmal der komplette Code (ich hasse es beim suchen von dingen auch immer nur in Foren zu finden "Es geht nun, danke" ohne eine Erklärung wie denn nun....)

HTML:

<script type="text/javascript">

	$(document).ready(function()
	{
	    $(".womo4").attr('disabled','disabled');
	    $(".womo5").attr('disabled','disabled');
	    $(".womo6").attr('disabled','disabled');
	    $("#Form label").css('color',"#c6c6c6");

	    $("#anzPersonen").change(function()
	    {
	        $(".womo4").removeAttr('disabled');
	        $(".womo5").removeAttr('disabled');
	        $(".womo6").removeAttr('disabled');

	        $("#Form label").css('color', '#ff0000');

	        var anzPers = $(this).val();
	        switch(true)
	        {
	            case(anzPers == 0):
	                 $(".womo4").attr('disabled','disabled');
	                 $(".womo5").attr('disabled','disabled');
	                 $(".womo6").attr('disabled','disabled');
	                 $("#Form label").css('color',"#c6c6c6");
	                break;
	            case(anzPers == 5):
	                 $(".womo4").attr('disabled','disabled');
	                 $('.womo4').removeAttr('checked');
	                 $(".womo4 + label").css('color', '#c6c6c6');
	                break;
	            case(anzPers == 6):
	                 $(".womo4").attr('disabled','disabled');
	                 $('.womo4').removeAttr('checked');
	                 $(".womo5").attr('disabled','disabled');
	                 $('.womo5').removeAttr('checked');
	                 $(".womo4 + label, .womo5 + label").css('color', '#c6c6c6');
	                break;
	        }
	    });
	});

</script>

<style type="text/css">

p
        {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        text-decoration:none;
        font-size: 12px;
        color: red;
        text-align:left;
        margin-bottom:3px;
        }

</style>
</head>
<body>

<form id="Form">
  <p>
    <select name="Anzahl" id="anzPersonen">
      <option selected="selected" value="">- 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 disabled="disabled" class="womo4" name="womo1" id="womo1" value="Flash S1" type="checkbox"/>
                <label for="womo1">Flash S1 (max. 4 Pers.)</label><br>
    <input disabled="disabled" class="womo4" name="womo2" id="womo2" value="Flash 01" type="checkbox">
                <label for="womo2">Flash 01 (max. 4 Pers.)</label><br>
    <input disabled="disabled" class="womo5" name="womo3" id="womo3" value="Flash 22" type="checkbox">
                <label for="womo3">Flash 22 (max. 5 Pers.)</label><br>
    <input disabled="disabled" class="womo6" name="womo4" id="womo4" value="Flash 03" type="checkbox">
                <label for="womo4">Flash 03 (max. 6 Pers.)</label><br>
    <input disabled="disabled" class="womo6" name="womo5" id="womo5" value="Flash 13" type="checkbox">
                <label for="womo5">Flash 13 (max. 6 Pers.)</label>
  </p>
</form>

<label id="label1">

</body></html>

Nochmals danke und viele DAumen hoch!

STEPHAN

Maniac · 31. Mai 2012

Du könntest es noch ein wenig verschönern, denn jQuery kann auch mehrfach Selektoren beinhalten:

Javascript:

$('.womo4, .womo5').removeAttr('checked');

✔ per dropdown andere Felder (checkboxen) ausgrauen / disablen

nordlicht_68

Grünschnabel

nordlicht_68

Grünschnabel

nordlicht_68

Grünschnabel

Lime

frisch fruchtig

Maniac

Erfahrenes Mitglied

nordlicht_68

Grünschnabel

Maniac

Erfahrenes Mitglied

Lime

frisch fruchtig

nordlicht_68

Grünschnabel

Maniac

Erfahrenes Mitglied

Neue Beiträge