Disable radio button on page load

<script type=“text/javascript”>
function disablefield(){
if (document.getElementById(‘yes_radio’).checked == 1){
document.getElementById(‘forenoon’).disabled=‘disabled’;
document.getElementById(‘forenoon’);
document.getElementById(‘afternoon’).disabled=‘disabled’;
document.getElementById(‘afternoon’);
}else{
document.getElementById(‘forenoon’).disabled=‘’;
document.getElementById(‘forenoon’);
document.getElementById(‘afternoon’).disabled=‘’;
document.getElementById(‘afternoon’);
}
}
</script>
<table>
<tr>
<td align=“right” valign=“top”> </td>
<td colspan=“2”>
<input type=“radio” name=“from” id=“no_radio” onChange=“disablefield();” value=“0.5” />
<strong>Half Day
<input type=“radio” name=“from” id=“yes_radio” onChange=“disablefield();” value=“1” checked=“checked” />
Full Day</strong></td>
<td> </td>
</tr>
<tr>
<td align=“right” valign=“top”> </td>
<td colspan=“2”>
<input type=“radio” name=“half_day1” id=“forenoon” value=“Forenoon” />
<strong>Forenoon
<input type=“radio” name=“half_day1” id=“afternoon” value=“Afternoon” />
Afternoon</strong></td>
<td> </td>
</tr>
</table>

If want that on page load by default fullday is selected and forenoon and afternoon will be disabled. but if halfday will be selected then forenoon and afternoon will be enabled.

plz help…

Currently the fullday starts off as being selected, so you only need to attach an onclick or onchange event to the “from” fields.
You currently have the event scripting intermingled with the HTML code, so lets move the scripting calls out of the HTML:

<strong><input type="radio" name="from" id="no_radio" value="0.5" /> Half Day 
<input type="radio" name="from" id="yes_radio" value="1" checked="checked" /> 
Full Day</strong>

And move those scripting calls in to the scripting code itself, where it belongs.


function setHalfDayRadios() {
    ...
}
document.getElementById('no_radio').onchange = setHalfDayRadios;
document.getElementById('yes_radio').onchange = setHalfDayRadios;
document.getElementById('yes_radio').onchange();

That last line triggers the onchange event, which causes the function to run. So now we only have to complete the function so that it disables the forenoon/afternoon radios if the full day radio is checked.


function setHalfDayRadios() {
    var isDisabled = document.getElementById('yes_radio').checked;
    document.getElementById('forenoon').disabled = isDisabled;
    document.getElementById('afternoon').disabled = isDisabled;
}

However, you can do too without having to use any of the id attributes inside of the form. It is best if only the form has an id attribute, such as “booking” in this case, and the rest of the form is kept without the clutter of extraneous identifier attributes.

Here’s how you might do that:


function setHalfDayRadios() {
    var form = this.form,
        isDisabled = document.getElementById('yes_radio').checked;
    form.elements.half_day1[0].disabled = isDisabled;
    form.elements.half_day1[1].disabled = isDisabled;
}
var form = document.getElementById('booking');
form.elements.from[0].onchange = setHalfDayRadios;
form.elements.from[1].onchange = setHalfDayRadios;
form.elements.from[1].onchange();