Syntax problem

[Claes Andersen]

Hi,

I got this piece of code that i intend to use for a quiz program. What it
does is the following. When a user makes a choice in a family of radio
buttons, the other choices are automatically disabled, hence allowing a
"first answer counts" system. It works fine with just one family on a page,
but I need it to work with more ... The function is called from the
respective radio buttons like this:

<input onclick="lockChoice(1,0);" type="radio" name="a1" value="1">

The lockChoice variables (1,0) in the above example are used (or intended to
be so - I do after all have a problem that i need help for;-) to move the
number of the question (1) and the number of the choice (0)

<script language="JavaScript">

function lockChoice(answ,choice){
for (i = 0; i <= 7; i++)
{
if (i != choice)
document.test.a1.disabled = true;
}
</script>

As it is above it is fine, but just for one family of radio buttons. I'm no
shark at JavaScript, but invented the above myself, so at least i got a bit
right ... so here is the big Q:

How do I build the following line:

document.test.a1.disabled = true;

so that it is dynamic also related to answ variable passed from each of the
choices? (a1, a2, a3, a4 etc.)? In short that the above a1 gets a bit
like [answ][a1] or however the syntax should be.

I tried more combinations, but im stuck:-( I'm soon getting my evening
spoiled here, so I address the honorable audience with a hope of a fast
solution. Any suggestions - that lead to the solve of the above - are dearly
appriciated

Best regards,

Claes Andersen

 

[Oz]

Wow, you're making this task harder than you need to. The solution is simple
if you are aware of the getElementsByName method on the document object.
Also you should know that your example is a missuse of a radio button. All
related radios should have the same name. That way the browser will
automatically automatically ensure that only one radio is selected for a
given group.

Here is an example implementation:

<script language="javascript">

function disableGroup(control){
//create a collection of radio inputs
var col = document.getElementsByName(control.name);
//loop and disable all except the one that is selected
for (var i=0;i<col.length;i++) {
if (!col.checked)
col.disabled = true;
}
}

</script>

<p>
<input name="a1" value=1 type="radio" onclick="disableGroup(this)">
<input name="a1" value=2 type="radio" onclick="disableGroup(this)">
</p>
<p>
<input name="a2" value=1 type="radio" onclick="disableGroup(this)">
<input name="a2" value=2 type="radio" onclick="disableGroup(this)">
</p>

 

[Claes Andersen]

Loads of thanks goes to Oz, who came up with a fast and good solution to my
problem.

Claes