ppmk22
Goto Top

Checkboxen auswahl begenzen

Hallo liebe Leute

Denn Codeschnippel habe ich im Netz gefunden und habe Probleme ihn für meine Bedürfnisse anzupassen.
Es sollen die Anzahl der möglichen Auswahlmöglichkeiten auf zwei bzw. auf drei begrenzt werden.
Also bei 1.1 bis 1.5 soll es zwei Möglichkeiten geben und bei 2.1 bis 2.5 sollen es drei Möglichkeiten sein.
Bin wie immer für jede Hilfe dankbar.

<html>
    <head>
        <script type="text/javascript" language="JavaScript">  
            function cbLimit_1()
            {
                with(document.forms)
                {
                    var cbLimit = 2; // Maximale Auswahl
                    var cbCount = 0;
                    var cbSel   = 0;

                    /* Anzahl der Checkboxen und der ausgewählten bestimmen */
                    for (var n = 0; n < elements.length; n++)
                    {
                        if(elements[n].type.toLowerCase() == 'checkbox')  
                        {
                            cbCount += 1;  // ++cbCount oder cbCount++ - sieht so aber schöner aus
                            cbSel   += elements[n].checked;
                        }
                    }
                    /* Auswertung */
                    for (var n = 0; n < cbCount; n++)
                        elements[n].disabled = !elements[n].checked && cbSel >= cbLimit;
                }
            }
            function cbLimit_2()
            {
                with(document.forms)
                {
                    var cbLimit = 2; // Maximale Auswahl
                    var cbCount = 0;
                    var cbSel   = 0;

                    /* Anzahl der Checkboxen und der ausgewählten bestimmen */
                    for (var n = 0; n < elements.length; n++)
                    {
                        if(elements[n].type.toLowerCase() == 'checkbox')  
                        {
                            cbCount += 1;  // ++cbCount oder cbCount++ - sieht so aber schöner aus
                            cbSel   += elements[n].checked;
                        }
                    }
                    /* Auswertung */
                    for (var n = 0; n < cbCount; n++)
                        elements[n].disabled = !elements[n].checked && cbSel >= cbLimit;
                }
            }
        </script>
    </head>
    <body>
        <form action="" method="post" name="cbTest">  
            1.1<input type="checkbox" name="cb1_1" onClick="cbLimit_1();"><br>  
            1.2<input type="checkbox" name="cb1_2" onClick="cbLimit_1();"><br>  
            1.3<input type="checkbox" name="cb1_3" onClick="cbLimit_1();"><br>  
            1.4<input type="checkbox" name="cb1_4" onClick="cbLimit_1();"><br>  
            1.5<input type="checkbox" name="cb1_5" onClick="cbLimit_1();"><br>  
            <br>
            2.1<input type="checkbox" name="cb2_1" onClick="cbLimit_2();"><br>  
            2.2<input type="checkbox" name="cb2_2" onClick="cbLimit_2();"><br>  
            2.3<input type="checkbox" name="cb2_3" onClick="cbLimit_2();"><br>  
            2.4<input type="checkbox" name="cb2_4" onClick="cbLimit_2();"><br>  
            2.5<input type="checkbox" name="cb2_5" onClick="cbLimit_2();"><br>  
        </form>
    </body>
</html>
</html>

Liebe Grüße
Petra

Content-Key: 159913

Url: https://administrator.de/contentid/159913

Ausgedruckt am: 29.03.2024 um 06:03 Uhr

Mitglied: nxclass
nxclass 02.02.2011 um 10:52:16 Uhr
Goto Top
so gehts jetzt:
<html>
    <head>
        <script type="text/javascript" language="JavaScript">  
            function cbLimit_1()
            {
                with(document.getElementById('cb1'))  
                {
                    var cbLimit = 2; // Maximale Auswahl
                    var cbCount = 0;
                    var cbSel   = 0;

                    /* Anzahl der Checkboxen und der ausgewählten bestimmen */
                    for (var n = 0; n < getElementsByTagName('input').length; n++)  
                    {
                        if(getElementsByTagName('input')[n].type.toLowerCase() == 'checkbox')  
                        {
                            cbCount += 1;  // ++cbCount oder cbCount++ - sieht so aber schöner aus
                            cbSel   += getElementsByTagName('input')[n].checked;  
                        }
                    }
                    /* Auswertung */
                    for (var n = 0; n < getElementsByTagName('input').length; n++)  
                    	getElementsByTagName('input')[n].disabled = !getElementsByTagName('input')[n].checked && cbSel >= cbLimit;  
                }
            }
            function cbLimit_2()
            {
                with(document.getElementById('cb2'))  
                {
                    var cbLimit = 3; // Maximale Auswahl
                    var cbCount = 0;
                    var cbSel   = 0;

                    /* Anzahl der Checkboxen und der ausgewählten bestimmen */
                    for (var n = 0; n < getElementsByTagName('input').length; n++)  
                    {
                        if(getElementsByTagName('input')[n].type.toLowerCase() == 'checkbox')  
                        {
                            cbCount += 1;  // ++cbCount oder cbCount++ - sieht so aber schöner aus
                            cbSel   += getElementsByTagName('input')[n].checked;  
                        }
                    }
                    /* Auswertung */
                    for (var n = 0; n < getElementsByTagName('input').length; n++)  
                    	getElementsByTagName('input')[n].disabled = !getElementsByTagName('input')[n].checked && cbSel >= cbLimit;  
                }
            }
        </script>
    </head>
    <body>
        <form action="" method="post" name="cbTest">  
        	<div id="cb1">  
            1.1<input type="checkbox" name="cb1_1" onClick="cbLimit_1(cb1);"><br>  
            1.2<input type="checkbox" name="cb1_2" onClick="cbLimit_1(cb1);"><br>  
            1.3<input type="checkbox" name="cb1_3" onClick="cbLimit_1(cb1);"><br>  
            1.4<input type="checkbox" name="cb1_4" onClick="cbLimit_1(cb1);"><br>  
            1.5<input type="checkbox" name="cb1_5" onClick="cbLimit_1(cb1);"><br>  
            </div>
            <br>
            <div id="cb2">  
            2.1<input type="checkbox" name="cb2_1" onClick="cbLimit_2(cb2);"><br>  
            2.2<input type="checkbox" name="cb2_2" onClick="cbLimit_2(cb2);"><br>  
            2.3<input type="checkbox" name="cb2_3" onClick="cbLimit_2(cb2);"><br>  
            2.4<input type="checkbox" name="cb2_4" onClick="cbLimit_2(cb2);"><br>  
            2.5<input type="checkbox" name="cb2_5" onClick="cbLimit_2(cb2);"><br>  
            </div>
        </form>
    </body>
</html>
</html>
Mitglied: nxclass
nxclass 02.02.2011 um 11:35:09 Uhr
Goto Top
noch etwas gekürzt - falls du 1.000.000 weitere Tests anfügen willst:
<html>
    <head>
        <script type="text/javascript" language="JavaScript">  
            function cbLimit(pnode, limit)
            {
                with( document.getElementById( pnode ) )
                {
                    var cbLimit = limit; // Maximale Auswahl
                    var cbCount = 0;
                    var cbSel   = 0;

                    /* Anzahl der Checkboxen und der ausgewählten bestimmen */
                    for (var n = 0; n < getElementsByTagName('input').length; n++)  
                    {
                        if(getElementsByTagName('input')[n].type.toLowerCase() == 'checkbox')  
                        {
                            cbCount += 1;  // ++cbCount oder cbCount++ - sieht so aber schöner aus
                            cbSel   += getElementsByTagName('input')[n].checked;  
                        }
                    }
                    /* Auswertung */
                    for (var n = 0; n < getElementsByTagName('input').length; n++)  
                    	getElementsByTagName('input')[n].disabled = !getElementsByTagName('input')[n].checked && cbSel >= cbLimit;  
                }
            }
        </script>
    </head>
    <body>
        <form action="" method="post" name="cbTest">  
        	<div id="cb1">  
            1.1<input type="checkbox" name="cb1_1" onClick="cbLimit('cb1',2);"><br>  
            1.2<input type="checkbox" name="cb1_2" onClick="cbLimit('cb1',2);"><br>  
            1.3<input type="checkbox" name="cb1_3" onClick="cbLimit('cb1',2);"><br>  
            1.4<input type="checkbox" name="cb1_4" onClick="cbLimit('cb1',2);"><br>  
            1.5<input type="checkbox" name="cb1_5" onClick="cbLimit('cb1',2);"><br>  
            </div>
            <br>
            <div id="cb2">  
            2.1<input type="checkbox" name="cb2_1" onClick="cbLimit('cb2',3);"><br>  
            2.2<input type="checkbox" name="cb2_2" onClick="cbLimit('cb2',3);"><br>  
            2.3<input type="checkbox" name="cb2_3" onClick="cbLimit('cb2',3);"><br>  
            2.4<input type="checkbox" name="cb2_4" onClick="cbLimit('cb2',3);"><br>  
            2.5<input type="checkbox" name="cb2_5" onClick="cbLimit('cb2',3);"><br>  
            </div>
        </form>
    </body>
</html>
</html>
Mitglied: ppmk22
ppmk22 02.02.2011 um 20:12:44 Uhr
Goto Top
Voll Toll face-smile Vielen vielen dank.
Mitglied: ppmk22
ppmk22 06.02.2011 um 00:44:43 Uhr
Goto Top
Hallo nxclass
Das geht soweit schon ganz gut danke noch mal. Möchte Dich aber doch noch mal um Hilfe bitten.
      <div id="cb1">  
            1.1<input type="checkbox" name="cb1_1" onClick="cbLimit('cb1',1);"><br>  
            1.2<input type="checkbox" name="cb1_2" onClick="cbLimit('cb1',2);"><br>  
            1.3<input type="checkbox" name="cb1_3" onClick="cbLimit('cb1',2);"><br>  
            1.4<input type="checkbox" name="cb1_4" onClick="cbLimit('cb1',2);"><br>  
            1.5<input type="checkbox" name="cb1_5" onClick="cbLimit('cb1',2);"><br>  
        </div>

Jetzt wird durch den Funktionsaufruf bei 1.1 "eine Checkbox möglich" übergeben. Jetzt wäre es toll, wenn bei der Auswahl von 1.3 schon das Feld für 1.1 disablet werden würde, damit man jetzt nicht doch noch 1.1 auswählen kann. Hintergrund ist. z:B. Bei folgender Fragestellung:
Was ist Ihre Lieblingsfarbe?
1.1 Das möchte ich nicht beantworten.
1.2 blau
1.3 rot
1.4 gelb
1.5 grau

Wenn der User jetzt 1.1 auswählt sollte eine weitere Auswahl nicht mehr möglich sein. (geht sowei ja auch) Und wenn als erstes eine Farbe ausgewählt wird solle man 1.1 nicht mehr auswählen können. Alternativ könnte nachdem man doch aus 1.1 klickt eine eventuell vorher ausgewählte Farbe wieder disablen. Hast Du da auch eine Lösung für?

Ganz liebe Grüße
Petra
Mitglied: nxclass
nxclass 07.02.2011 um 08:09:08 Uhr
Goto Top
... ich glaube an dieser Stelle sollte überlegt werden ob man doch zu jedem Punkt ein eigenes JS schreibt oder nicht - oder besser noch: gleich eine Auswertung auf Server Seite mit AJAX.

Aber:
                    /* Auswertung */ 
                    for (var n = 0; n < getElementsByTagName('input').length; n++)   
                    	getElementsByTagName('input')[n].disabled = !getElementsByTagName('input')[n].checked && cbSel >= cbLimit;   
ändern in
switch (this.id) {
 case 'cb1':  
    /* die spezielle Auswertung */
    break;
/* ...*/

  default:
    for (var n = 0; n < getElementsByTagName('input').length; n++)   
      getElementsByTagName('input')[n].disabled = !getElementsByTagName('input')[n].checked && cbSel >= cbLimit;  
}
damit könntest Du spezielle Auswertungen einfügen.