Archivlink: javarea.de Forum > JavaScript > aktive Checkboxen begrenzen! Geht das??
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > aktive Checkboxen begrenzen! Geht das??
Pages: [1]
| geschrieben von 18inch am 07.01.2005 - 23:11 |
Hallo,
ich habe auf meiner Seite so ca. 50 Checkboxen. Davon soll man maximal 5 aktivieren können. Kann ich das mittels JS zeitnah überprüfen lassen. Ich möchte, wenn 5 Boxenangeklickt wurden, dass alle anderen automatisch inaktiv werden.
Das Problem ist, dass ich keinerlei Kenntnis über die JS Syntax besitze. ich kenne mich zwar mit PHP, MySQL, html und CSS sehr gut aus. Jedoch hören meine kenntnisse genau bei JS auf.
Kann mir vielleicht jemand erklären oder aufzeigen wie ich das mittles JS hinbekomme??
Danke
18inch
|
| geschrieben von Daniel am 08.01.2005 - 01:42 |
Mal ne Idee... Kann man natürlich noch schöner machen, wenn man weiß wie viele es sind, oder ob sie einen gleichen Namen haben oder eine Reihe von Id's sind. Bei dieser Lösung ist das egal - dafür muss aber jedes Formuarfeld überprüft werden.
Wird eine Auswahl wieder rückgängig gemacht (<cbLimit), so aktivieren sich auch die Checkboxe's wieder 
| HTML-Quelltext | 1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
| <html>
<head>
<script type="text/javascript" language="JavaScript">
function cbLimit()
{
with(document.forms[0])
{
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">
<input type="checkbox" name="cb_1" onClick="cbLimit();">
<input type="checkbox" name="cb_2" onClick="cbLimit();">
<input type="checkbox" name="cb_3" onClick="cbLimit();">
<input type="checkbox" name="cb_4" onClick="cbLimit();">
<input type="checkbox" name="cb_5" onClick="cbLimit();">
u.s.w.
<input type="checkbox" name="cb_945" onClick="cbLimit();">
</form>
</body>
</html> |
PS: Ich kann mit irgendwie schlecht vorstellen, dass ein HTML, CSS, PHP und mySQL Profi Schwierigkeiten mit JS hat  Wenn man das alles gelernt und begriffen hat, sollte JS auch keine Problem sein |
| geschrieben von 18inch am 08.01.2005 - 12:18 |
Vielen Dank schon mal!!!!
Das funktioniert schon ganz gut. Jedoch werden die checkboxen erst ausgeblendet, wenn ich die 6. Checkbox anklicken will. Sobald ich dieses versuche wird diese nicht aktiviert und alle anderen auch deaktiviert.
Wenn ich dann wieder eine aktivierte checkbox wieder anklicke, bleiben alle anderen noch inaktiv. Erst wenn ich zwei aktive Boxen von Ihrem Häckchen befreie, erscheinen alle anderen wieder als aktiv.
Kann man das noch verfeinern?
ps: Das Programmieren von JS sollte auch kein Problem sein. Jedoch kenn eich mich abolut nicht mit der Syntax aus. |
| geschrieben von Daniel am 08.01.2005 - 13:22 |
| Habs mal geändert. Der IE hat Probleme mit den onChange. |
| geschrieben von 18inch am 08.01.2005 - 13:57 |
Jetzt habe ich noch ein letztes kleines Problem! 
Ich lasse die Daten mit den Checkboxen aus meiner Datenbank auslesen. Wenn bestimmte Werte vorher aktiviert waren, dann wird die dementsprechende Box direkt mit checked versehen. (max. 5) Wenn dann 5 von den ca. 50 Boxen schon checked sind, dann kann ich noch eine 6. auswählen und dann werden die anderen erst inaktiv.
Kann man das auch abändern?? Wenn 5 aktive Boxen ausgelesen werden, sollen die anderen direkt inaktiv erscheinen. Geht das?
ps: Vielen, vielen Dank!!! DU hast mir echt geholfen bisher. Hast du vielleicht eine gute Tutorial Seite für JS. Ich suche ein Tutorial von A-Z. Wo alles von anfang an erklärt wird. Oder vielleicht einen guten Buchvorschlag??? Danke |
| geschrieben von Daniel am 08.01.2005 - 15:21 |
Hmm.. du könntest einfach in den body-tag schreiben:
| HTML-Quelltext | 1:
| <body onLoad="cbLimit();"> |
JS habe ich mir so zwangsweise selbst beigebracht. Ich habe immer wieder kleinere Scripts gebraucht. Da ich aber keine Lust hatte mir welche per Copy&Past zusammenzubauen (-klauen) und diese dann meistens eh net gefunzt haben, habe ich es halt selbst gemacht. Immer bei SelfHTML geschaut und dann genauso wie mit PHP und den anderen Dingen im Leben: Übung macht den Meister ^^
|
| geschrieben von Gast am 11.11.2009 - 23:22 |
| Zitat von: Daniel am 08.01.2005 - 01:42 | | |
Mal ne Idee... Kann man natürlich noch schöner machen, wenn man weiß wie viele es sind, oder ob sie einen gleichen Namen haben oder eine Reihe von Id's sind. Bei dieser Lösung ist das egal - dafür muss aber jedes Formuarfeld überprüft werden.
Wird eine Auswahl wieder rückgängig gemacht (<cbLimit), so aktivieren sich auch die Checkboxe's wieder
| HTML-Quelltext | 1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
| <html>
<head>
<script type="text/javascript" language="JavaScript">
function cbLimit()
{
with(document.forms[0])
{
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">
<input type="checkbox" name="cb_1" onClick="cbLimit();">
<input type="checkbox" name="cb_2" onClick="cbLimit();">
<input type="checkbox" name="cb_3" onClick="cbLimit();">
<input type="checkbox" name="cb_4" onClick="cbLimit();">
<input type="checkbox" name="cb_5" onClick="cbLimit();">
u.s.w.
<input type="checkbox" name="cb_945" onClick="cbLimit();">
</form>
</body>
</html> |
PS: Ich kann mit irgendwie schlecht vorstellen, dass ein HTML, CSS, PHP und mySQL Profi Schwierigkeiten mit JS hat Wenn man das alles gelernt und begriffen hat, sollte JS auch keine Problem sein
|
|
| geschrieben von Gast am 11.11.2009 - 23:36 |
Hmmm, der erste Beitrag hat leider nicht geklappt , bitte löschen!
Also noch mal:
Ich weiß, der Beitrag ist schon recht alt, hätte aber trotzdem eine Frage dazu:
Kann man das Script auch so einsetzen, dass nur checkboxen ausgeblendet werden, wenn die maximalen Stimmen abgegeben wurden?
Bei mir wird auch der submit-Button mit ausgeblendet. Das sollte nicht so sein.
So sieht übrigens meine "Checkbox" aus: | HTML-Quelltext | 1:
| <input type="checkbox" name="vote[]" id="text$text_id" value="$text_id" onClick="cbLimit();"> |
Ansonsten ist das ein super Script, danke!
| Zitat von: Daniel am 08.01.2005 - 01:42 | | |
Mal ne Idee... Kann man natürlich noch schöner machen, wenn man weiß wie viele es sind, oder ob sie einen gleichen Namen haben oder eine Reihe von Id's sind. Bei dieser Lösung ist das egal - dafür muss aber jedes Formuarfeld überprüft werden.
Wird eine Auswahl wieder rückgängig gemacht (<cbLimit), so aktivieren sich auch die Checkboxe's wieder
| HTML-Quelltext | 1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
| <html>
<head>
<script type="text/javascript" language="JavaScript">
function cbLimit()
{
with(document.forms[0])
{
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">
<input type="checkbox" name="cb_1" onClick="cbLimit();">
<input type="checkbox" name="cb_2" onClick="cbLimit();">
<input type="checkbox" name="cb_3" onClick="cbLimit();">
<input type="checkbox" name="cb_4" onClick="cbLimit();">
<input type="checkbox" name="cb_5" onClick="cbLimit();">
u.s.w.
<input type="checkbox" name="cb_945" onClick="cbLimit();">
</form>
</body>
</html> |
|
|
|