...

View Full Version : checkbox conditions



saxy46
10-13-2008, 11:02 PM
Hey Everyone,

I am trying to code a form with checkboxes that list out scheduled sessions during a conference. There are 2 different types of sessions all on the same day. There is full day sessions and half day sessions, either starting at 9:30 or at 1:30. I want to make it that if you choose one of the 3 full day sessions, then you can't choose anything else, the other checkboxes are disabled. If you choose one of the 5 half day sessions, then the full day sessions are disabled. Here is the kicker though, with the half day sessions, they 3 are at 9:30 and 2 are at 1:30. I want it that if you choose a 9:30 half day session, then all of the other 9:30 sessions are disabled which would leave only the 1:30 session enabled and vice versa. Of course, when you uncheck one of the boxes, then it resets the boxes and makes the other checkboxes enabled if they were disabled before. Does that make sense? Any help is greatly appreciated!

Arty Effem
10-14-2008, 06:25 AM
This solution uses a master-slave checkbox controller (http://scripterlative.com?checkboss) to achieve what (I think) you specified. The only slight imperfection is that because there's no conditional logic, some checkboxes could become enabled at the wrong time, but checking one would still cancel out anything ineligible: Demo (http://scripterlative.com/test/sessions/).

saxy46
10-14-2008, 02:58 PM
Hey Arty,

Thanks so much for your response....Looks a lot cleaner then my code! I was doing a lot of if else statements....I will play around with it and see how it goes...Thanks again.

jmrker
10-14-2008, 06:57 PM
I read the original requirements differently. I thought you wanted the conditions checked for each of three days. Here's what I came up with.


<html>
<head>
<title>Schedule Problem</title>
<script type="text/javascript">
function ScedAD(choice) {
var IDS;
var apd = choice.split('-');
if (document.getElementById(choice).checked == true) {
for (i=1; i<=3; i++) { IDS='M-'+apd[1]+'-S'+i;
document.getElementById(IDS).checked = false; document.getElementById(IDS).disabled = true; }
for (i=1; i<=2; i++) { IDS='P-'+apd[1]+'-S'+i;
document.getElementById(IDS).checked = false; document.getElementById(IDS).disabled = true; }
} else {
for (i=1; i<=3; i++) { IDS='M-'+apd[1]+'-S'+i; document.getElementById(IDS).disabled = false; }
for (i=1; i<=2; i++) { IDS='P-'+apd[1]+'-S'+i; document.getElementById(IDS).disabled = false; }
}
document.getElementById(choice).disabled = false;
}
function ScedPD(choice) {
var apd = choice.split('-');
var flag = document.getElementById(choice).checked;
if (apd[0] == 'M') {
for (i=1; i<=3; i++) {
IDS='M-'+apd[1]+'-S'+i;
if (flag == true) { document.getElementById(IDS).disabled = true; }
else { document.getElementById(IDS).disabled = false; }
}
}
if (apd[0] == 'P') {
for (i=1; i<=2; i++) {
IDS='P-'+apd[1]+'-S'+i;
if (flag == true) { document.getElementById(IDS).disabled = true; }
else { document.getElementById(IDS).disabled = false; }
}
}
document.getElementById(choice).disabled = false;
}
function ShowSelections() {
var IDarray = ['D-1-1','D-2-1','D-3-1'];
var str = 'Decode settings';
// alternatively, set values and use them to display current selections instead of decoding IDs
for (i=0; i<IDarray.length; i++) {
str += '\n\nDay '+(i+1)+'\n';
if (document.getElementById(IDarray[i]).checked) { str += IDarray[i]+'\n'; }
else {
for (j=1; j<=3; j++) { IDS = 'M-'+(i+1)+'-S'+j; if (document.getElementById(IDS).checked) { str += IDS + '\n'; } }
for (j=1; j<=2; j++) { IDS = 'P-'+(i+1)+'-S'+j; if (document.getElementById(IDS).checked) { str += IDS + '\n'; } }
}
}
alert(str);
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>Day 1 Session<br>
<input type="checkbox" id="D-1-1" onclick="ScedAD(this.id)" value=""> All-Day
</td>
<td>
Half-Day Sessions<br>
<input type="checkbox" id="M-1-S1" onclick="ScedPD(this.id)" value="">9:30 Session 1</br>
<input type="checkbox" id="M-1-S2" onclick="ScedPD(this.id)" value="">9:30 Session 2</br>
<input type="checkbox" id="M-1-S3" onclick="ScedPD(this.id)" value="">9:30 Session 3</br>
<br>
<input type="checkbox" id="P-1-S1" onclick="ScedPD(this.id)" value="">1:30 Session 1</br>
<input type="checkbox" id="P-1-S2" onclick="ScedPD(this.id)" value="">1:30 Session 2</br>
</td>
</tr>
<tr>
<td>Day 2 Session<br>
<input type="checkbox" id="D-2-1" onclick="ScedAD(this.id)" value=""> All-Day
</td>
<td>
Half-Day Sessions<br>
<input type="checkbox" id="M-2-S1" onclick="ScedPD(this.id)" value="">9:30 Session 1</br>
<input type="checkbox" id="M-2-S2" onclick="ScedPD(this.id)" value="">9:30 Session 2</br>
<input type="checkbox" id="M-2-S3" onclick="ScedPD(this.id)" value="">9:30 Session 3</br>
<br>
<input type="checkbox" id="P-2-S1" onclick="ScedPD(this.id)">1:30 Session 1</br>
<input type="checkbox" id="P-2-S2" onclick="ScedPD(this.id)">1:30 Session 2</br>
</td>
</tr>
<tr>
<td>Day 3 Session<br>
<input type="checkbox" id="D-3-1" onclick="ScedAD(this.id)" value=""> All-Day
</td>
<td>
Half-Day Sessions<br>
<input type="checkbox" id="M-3-S1" onclick="ScedPD(this.id)" value="">9:30 Session 1</br>
<input type="checkbox" id="M-3-S2" onclick="ScedPD(this.id)" value="">9:30 Session 2</br>
<input type="checkbox" id="M-3-S3" onclick="ScedPD(this.id)" value="">9:30 Session 3</br>
<br>
<input type="checkbox" id="P-3-S1" onclick="ScedPD(this.id)" value="">1:30 Session 1</br>
<input type="checkbox" id="P-3-S2" onclick="ScedPD(this.id)" value="">1:30 Session 2</br>
</td>
</tr>
</table>
<input type="button" value="Current Selections" onClick="ShowSelections()">
</body>
</html>

The 'Current Selections' button is just to show the picks of the user. Could be used to display the 'values' of the selections instead.

If of no use to you, then ignore the post.
:D

saxy46
10-14-2008, 07:15 PM
hey JM,

thanks for the reply...I will take a look at your code as well!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum