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

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 159913

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

Ausgedruckt am: 22.11.2024 um 15:11 Uhr

5 Kommentare

Neuester Kommentar

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>

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>

Voll Toll

Vielen vielen dank.

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

... 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.