PDA

Click to See Complete Forum and Search --> : Checkbox list and greying out

muwa
01-07-2003, 10:05 AM
Say I have a list of checkboxes, if I only want my users to be able to choose two of them and then grey out the rest, does anyone know if that is possible.

Thanx for any help ya'll can give,
Mischa
AdamBrill
01-07-2003, 12:49 PM
You can gray out a checkbox like this:

document.NameOfForm.NameOfCheckbox.disabled=true;

Just put in the Name of the form and the Name of the Checkbox it will disable it. If you need more help, just ask...
muwa
01-07-2003, 01:38 PM
I'm not a JS developer, which will be obvious by the code below...

function TotalCheck()
{
var count = 0;

if (document.Libform.SICCode.checked == true){
var count = count ++;}
if (document.Libform.TradeJournal.checked = true){
var count = count ++;}
if (document.Libform.TradeAssociation.checked = true){
var count = count ++;}

if (var count = 2;){
alert("You may only select two types of research");}
ACTION HERE IS TO DISABLE ALL UNCHECKED CHECKBOXES ONCE TWO OF THEM ARE CHECKED
}

That is what I want to do, basically.

I want the user to select up to two checkboxes and as soon as they select their second checkbox, I want the rest of them to be disabled.....

Any ideas?
AdamBrill
01-07-2003, 03:57 PM
Try this:


<html>
<body>
<script language=javascript>
function TotalCheck()
{
count = 0;

x=1;

do
{
element=document.getElementById(x);
if(element.checked==true)
{
count++;
}
x++;
}while(document.getElementById(x));

if (count > 1)
{
x=1;

do
{
element=document.getElementById(x);
if(element.checked!=true)
{
element.disabled=true;
}
x++;
}while(document.getElementById(x));

alert("You may only select two types of research");
}
}

</script>
<form name=Libform>
<input type=checkbox id="1" name=SICCode onclick="TotalCheck()"><br>
<input type=checkbox id="2" name=TradeJournal onclick="TotalCheck()"><br>
<input type=checkbox id="3" name=TradeAssociation onclick="TotalCheck()"><br>
</form>
</body>
</html>

You can add as many checkboxes as you want and it will still work. If you add more, just make sure that you add the ids the same way that I did. Try it out and let me know what you think...:)
muwa
01-07-2003, 04:15 PM
That's pretty awesome...Thank you very much for taking the time to help.

One thing that I think will be a barrier though is the fact that once you've checked two of them the rest grey out and you can't uncheck and recheck one that is now grey.....

(I took out the alert, because I think that is confusing now that they actually grey out. :) )

So, say user does the following:
clicks on option 1
clicks on option 2
changes his/er mind and unchecks option 2
Now s/he can't check option 3 or higher....

Any idea how to change that?

Thanks again for you awesome help :)
Mischa
AdamBrill
01-07-2003, 04:41 PM
This should work better:

<html>
<body>
<script language=javascript>
function TotalCheck()
{
count = 0;

x=1;

do
{
element=document.getElementById(x);
if(element.checked==true)
{
count++;
}
x++;
}while(document.getElementById(x));
if (count > 1)
{
x=1;

do
{
element=document.getElementById(x);
if(element.checked!=true)
{
element.disabled=true;
}
x++;
}while(document.getElementById(x));
}
else
{
x=1;

do
{
element=document.getElementById(x);
element.disabled=false;
x++;
}while(document.getElementById(x));

}
}

</script>
<form name=Libform>
<input type=checkbox id="1" name=SICCode onclick="TotalCheck()" value="ON"><br>
<input type=checkbox id="2" name=TradeJournal onclick="TotalCheck()" value="ON"><br>
<input type=checkbox id="3" name=TradeAssociation onclick="TotalCheck()" value="ON"><br>
</form>
</body>
</html>

It puts them back to enabled if there are less than 2 checked. Let me know if you need anything else...
muwa
01-07-2003, 04:47 PM
You're awesome! Thanx so much. That is exactly what I needed.

Thanx again,
Mischa