nicht angemeldet
Hallo,
das folgende Script lässt deine Submit-Routine in Ruhe und aktiviert respektive deaktiviert Checkboxen onclick je nach bereits gewählter Anzahl. Voraussetzung ist, dass deine Seite nicht unter Netscape 4.x laufen muss.
Ab IE 5.0 und Netscape 6 / Mozilla haben Formularelemente eine Eigenschaft disabled, und die macht sich das Script zu Nutze. Außerdem erfolgt der Zugriff auf die Checkboxen über DOM-Syntax (document.getElementsByName("ck"), und auch das würden ältere Browser nicht verstehen.
Gucks dir mal an und schau, ob du was damit anfangen kannst.
Liebe Grüße, Uschi
Anbei der Code:
<html>
<head>
<title>Checkboxen deaktivieren</title>
<script language="JavaScript">
var maxChecks = 2;
function limitChecks(el) {
/* Die folgende Zeile sammelt dir alle Elemente mit dem Namen "ck"
* in einem Array mit dem Namene cks
*/
cks = document.getElementsByName("ck");
/* Variante 1: Userlein hat eine Checkbox aktiviert */
if(el.checked == true) {
/* Checken, wieviele Checkboxen bereits checked sind */
var currentChecks = 0;
for(var i=0; i<cks.length; i++) {
if(cks[i].checked == true) currentChecks++;
}
/* Wenn die erlaubte Anzahl von Checks erreicht ist, werden
* alle noch nicht geckeckten auf disabled gesetzt
*/
if(currentChecks == maxChecks) {
for(var i=0; i<cks.length; i++) {
if(!cks[i].checked) cks[i].disabled = true;
}
}
/* Variante 2: Userlein hat eine Checkbox deaktiviert.
* In diesem Falle werden alle gesperrten Boxen wieder freigeschaltet.
*/
} else {
for(var i=0; i<cks.length; i++) {
if(cks[i].disabled) cks[i].disabled = false;
}
}
}
</script>
</head>
<body>
<form id="myForm">
<p>Bitte nicht mehr als zwei Checkboxen ankreuzen.</p>
<input type="checkbox" name="ck" value="1" onclick="limitChecks(this)" /> Checkbox 1<br />
<input type="checkbox" name="ck" value="2" onclick="limitChecks(this)" /> Checkbox 2<br />
<input type="checkbox" name="ck" value="3" onclick="limitChecks(this)" /> Checkbox 3<br />
<input type="checkbox" name="ck" value="4" onclick="limitChecks(this)" /> Checkbox 4<br />
</form>
</body>
</html>