NishSF said:
Would anyone have any suggestions/javascript code so that if one clicks
the Radio Button "Yes" below he has the option of selecting any of the
six CheckBox below. If the user clicks on Radio Button "No", he should
not have the option of clicking on any of the six checkboxes. See Code
attached. Thank you so much in advance for your help as I can't get to
make this combo work.
Some issues for you to think over in regard to your use of radio buttons.
1. There is some uncertainty regarding whether or not at least one radio
button should always be selected by default.
<URL:
http://www.w3.org/TR/html4/interact/forms.html#radio>
I guess you should decide whether 'Yes' or 'No' should be checked by
default and ensure one of them is.
2. If you don't have one selected by default, what does neither yes nor
no mean? And once the user has selected one or the other, they can't
get back to neither selected without resetting the entire form.
3. The buttons should be enabled by default else users without script
can't access them. So what criterion should be used to disable them?
You need an onload function that makes a decision and enables/disables
them accordingly. I've used 'if yes isn't checked, disable them'.
4. If the user checks yes, then selects some checkboxes, then checks no,
should the checked boxes be unchecked? Once disabled, they won't be
sent but they will still appear checked and can't be unchecked without
answering yes, un-checking them and checking no again.
An alternative is to use a single yes/no checkbox instead of two radio
buttons - but you might think that confusing too.
Just food for thought, the final decision is of course yours. I've
given an example below using your original code with no radio button
checked by default.
My preference would be to not have the radio buttons at all, and just
have the question as:
"If you had problems ... please indicate which (select all that
apply):"
[checkbox] problem 1
[checkbox] problem 2
...
If none of the boxes are checked, the user had no problems. If some are,
they did - and no need for script at all.
<p>Did you have any problems finding any of the information or
documents required to complete the Self-Registration process?<br />
<input name="InfoFindProblems" type="radio" value="yes" />
Yes
<input name="InfoFindProblems" type="radio" value="no"
onChange="disableBoxes(this.checked)" />
onchange works differently in different browsers. According to the
specification, onchange should fire:
"...when a control loses the input focus and its value has been
modified since gaining focus"
<URL:
http://www.w3.org/TR/html4/interact/scripts.html#adef-onchange>
That is what IE does. So when the user clicks on the control, nothing
happens until they click somewhere else, making it appear as if the
event is in response to the second click.
Firefox fires the event immediately (essentially as an onclick). The
usual solution is to fire the event using onclick to get consistent
behaviour.
No</p>
<p> If yes, please indicate which (select all that apply): <br
/>
Declaration page <br />
<input name="ProblemARE" type="checkbox" id="ProblemARE"
value="1" />
Annual Rating Endorsement [A.R.E.] <br />
<input name="ProblemGrpNum" type="checkbox"
id="ProblemGrpNum" value="2" />
Group Number <br />
<input name="ProblemPolNum" type="checkbox"
id="ProblemPolNum" value="3" />
Policy Number<br />
<input name="ProblemSignDt" type="checkbox"
id="ProblemSignDt" value="4" />
Countersign Date<br />
<input name="ProblemDOCode" type="checkbox"
id="ProblemDOCode" value="5" />
District Office Code </p>
Your markup indicates you may be using XHTML. In that case, modify your
script elements accordingly.
<URL:
http://www.w3.org/TR/xhtml1/#h-4.8>
If you are using HTML, don't use ' />' to close empty element tags, it
is not valid HTML and potentially harmful. I've assumed you are really
using HTML:
<script type="text/javascript">
function disableBoxes()
{
var form = document.forms['formA'];
var cBoxes = ['ProblemARE', 'ProblemGrpNum', 'ProblemPolNum',
'ProblemSignDt', 'ProblemDOCode'];
var flag = !form.InfoFindProblems[0].checked;
var i = cBoxes.length;
while (i--){
form[cBoxes
].disabled = flag;
}
}
window.onload = disableBoxes;
</script>
<form name="formA" action="">
<p>Did you have any problems finding any of the information or
documents required to complete the Self-Registration process?<br>
<input name="InfoFindProblems" type="radio" value="yes"
onclick="disableBoxes();">Yes
<input name="InfoFindProblems" type="radio" value="no"
onclick="disableBoxes();">No</p>
<p>If yes, please indicate which (select all that apply):<br>
Declaration page<br>
<input name="ProblemARE" type="checkbox" id="ProblemARE"
value="1">Annual Rating Endorsement [A.R.E.]<br>
<input name="ProblemGrpNum" type="checkbox"
id="ProblemGrpNum" value="2">Group Number<br>
<input name="ProblemPolNum" type="checkbox"
id="ProblemPolNum" value="3">Policy Number<br>
<input name="ProblemSignDt" type="checkbox"
id="ProblemSignDt" value="4">Countersign Date<br>
<input name="ProblemDOCode" type="checkbox"
id="ProblemDOCode" value="5">District Office Code</p>
</form>