Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script type="text/javascript">
// Dieses Array enthält alle zu behandelnden Elemente
var allE = new Array();
// Dieses Array enthält die zu disablen Elemente
var dis = new Array();
// Die benötigte Anzahl ausgewählter Elemente
var _freeCount = '';
var freeCount = new Array();
freeCount['RB1'] = 3;
freeCount['RB2'] = 4;
freeCount['RB3'] = 5;
freeCount['TEXT'] = new Array('null', 'eins', 'zwei', 'drei', 'vier', 'fünf');
function start() {
_freeCount = ''
// Alle Elemente einlesen
allE = getIDs('CB1', 'CB2', 'rb8', 'rb9', 'CB3', 'CB4', 'CB5', 'CB6', 'CB7', 'CB8', 'rb4', 'rb5', 'CB9', 'CB10', 'CB11', 'CB12', 'CB13', 'CB14', 'rb6', 'rb7', 'CB15')
dis['RB1'] = getIDs('rb6', 'rb7', 'rb8', 'rb9');
dis['RB2'] = getIDs('rb8', 'rb9', 'CB1', 'CB3', 'CB6', 'rb4', 'rb5', 'CB11', 'CB14');
dis['RB3'] = getIDs('CB1', 'CB3', 'CB6', 'rb4', 'rb5', 'CB11', 'CB14', 'CB2', 'CB4', 'CB7', 'CB8', 'CB9', 'CB12', 'rb6', 'rb7');
// Alle Elemente ausgrauen
gray(allE);
}
function setElements(o) {
gray(dis[o.id]);
_freeCount = freeCount[o.id];
}
// Holt alle Elemente mit den übergebenen ID's
function getIDs() {
var el = new Array();
for(var i = 0; i < getIDs.arguments.length; i++) {
el.push(document.getElementById(getIDs.arguments[i]));
}
return el;
}
// Graut die Elemente aus
function gray(elements) {
for(var i=0; i < allE.length; i++) {
allE[i].disabled = false;
}
for(var i=0; i < elements.length; i++) {
elements[i].disabled = true;
}
}
// Formular wird abgeschickt
function mysubmit() {
// R1-3 ausgeählt?
if(!_freeCount) {
alert("Bitte wählen sie RB1-3 aus");
return false;
}
// Zählen wieviele Elemente ausgewählt wurden
var count = 0;
var allNames = new Array();
for(var i=0; i < allE.length; i++) {
// checkbox oder radio nicht disabled und aktiv ?
if(!allE[i].disabled && allE[i].checked && (allE[i].type == 'checkbox' || allE[i].type == 'radio')) {
if(allNames[allE[i].name]) {
alert("Die Namen der ausgewählten Elemente müssen sich unterscheiden");
return false;
}
allNames[allE[i].name] = true;
count++;
}
}
// Mindestanzahl?
if(count < _freeCount) {
alert("Bitte wählen Sie min. " + freeCount['TEXT'][_freeCount] + " Elemente aus");
return false;
}
return true;
}
</script>
</head>
<body onload="start()">
<form action="">
<table>
<thead>
<tr>
<th><input type="radio" name="NameRB" id="RB1" onclick="setElements(this)"/>
Text</th>
<th><input type="radio" name="NameRB" id="RB2" onclick="setElements(this)" />
Text</th>
<th><input type="radio" name="NameRB" id="RB3" onclick="setElements(this)" />
Text</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="RB1" id="CB1" />
Text</td>
<td><input type="checkbox" name="RB2" id="CB2" />
Text</td>
<td><input type="radio" name="RB3" id="rb8" />
Text
<input type="radio" name="RB3" id="rb9" />
Text</td>
</tr>
<tr>
<td><input type="checkbox" name="RB1" id="CB3" />
Text</td>
<td><input type="checkbox" name="RB2" id="CB4" />
Text</td>
<td><input type="checkbox" name="RB3" id="CB5" />
Text</td>
</tr>
<tr>
<td><input type="checkbox" name="RB1" id="CB6" />
Text</td>
<td><input type="checkbox" name="RB2" id="CB7" />
Text</td>
<td><input type="checkbox" name="RB2" id="CB8" />
Text</td>
</tr>
<tr>
<td><input type="radio" name="RB1" id="rb4" />
Text
<input type="radio" name="RB1" id="rb5" />
Text</td>
<td><input type="checkbox" name="RB2" id="CB9" />
Text</td>
<td><input type="checkbox" name="RB3" id="CB10" />
Text</td>
</tr>
<tr>
<td><input type="checkbox" name="RB1" id="CB11" />
Text</td>
<td><input type="checkbox" name="RB2" id="CB12" />
Text</td>
<td><input type="checkbox" name="RB3" id="CB13" />
Text</td>
</tr>
<tr>
<td><input type="checkbox" name="RB1" id="CB14" />
Text</td>
<td><input type="radio" name="RB2" id="rb6" />
Text
<input type="radio" name="RB2" id="rb7" />
Text</td>
<td><input type="checkbox" name="RB3" id="CB15" />
Text</td>
</tr>
</tbody>
</table>
<input type="submit" id="submit" onclick="return mysubmit()" />
<input type="reset" onclick="start()" />
</form>
</body>
</html> |
