per dropdown andere Felder (checkboxen) ausgrauen / disablen

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!!
 
Zuletzt bearbeitet:
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
 
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
 
Zuletzt bearbeitet:
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.
 
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>
 
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
 
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;
        }

    });
});
 
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
 
Du könntest es noch ein wenig verschönern, denn jQuery kann auch mehrfach Selektoren beinhalten:

Javascript:
$('.womo4, .womo5').removeAttr('checked');
 
Zurück