I am developing jsf page in which i am using three radio buttons and 5 text boxes. with selection of the first radio, there should be no text boxes, and for the second radio button, there should be two text boxes to be enabled, and for the third option, there should be three text boxes enabled
while we choose one text boxes , all the other text boxes associated with other radio buttons should be disabled


i am using the following java script code

Code:
<script type="text/javascript">
function toggleGroup(o, type, subtype) {
// disable all text inputs that are descendants of the radio buttons grandparent
var pp = o.parentNode.parentNode;
var os = pp.getElementsByTagName(type);
for (var i = 0; i < os.length; ++i) {
if (os[i].type == subtype) {
os[i].disabled = true;
}
}

// then enable all text inputs that have the same parent as the radio button
var p = o.parentNode;
var os = p.getElementsByTagName(type);
for (var i = 0; i < os_new.length; ++i) {
if (os[i].type == subtype) {
os[i].disabled = false;
}
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Work Load Model</title> 
<link rel="stylesheet" type="text/css" href="bizp_css.css"/>
<style type="text/css">
.cols {
vertical-align: top;
width: 50%;
}
</style>


the jsf page is the following

<h:panelGroup>

<h:selectOneRadio id="ss" style="width: 208px; height: 21px" value="" onclick="toggleGroup(this, 'input', 'text');" >	
<f:selectItem id="item1" itemLabel="Steady State (default)" itemValue="default" />
</h:selectOneRadio>	
<h:outputLabel></h:outputLabel>
</h:panelGroup>

<h:panelGroup>	
<h:selectOneRadio id="Ramp" style="width: 208px; height: 21px" value="" onclick="toggleGroup(this, 'input', 'text');" >	
<f:selectItem id="item2" itemLabel="Ramp-up/Ramp-down" itemValue="ramp" />
</h:selectOneRadio>	

<h:outputLabel></h:outputLabel>
<h:panelGrid border="1" columns="2" style="height: 50px">	
<h:outputText value="No Of Users at startup" style="font-size: 14px; font-family: Times New Roman, Arial, Sans-Serif"></h:outputText>
<h:inputText disabled="true" style="width: 220px; height: 30px"></h:inputText>
<h:outputText value="No of Users to be added every second" style="font-size: 14px; font-family: Times New Roman, Arial, Sans-Serif"></h:outputText>
<h:inputText disabled="true" style="width: 220px; height: 30px"></h:inputText>
</h:panelGrid>
</h:panelGroup>	
<h:panelGroup>	
<h:selectOneRadio id="SteppedRamp" style="width: 208px; height: 21px" value="" onclick="toggleGroup(this, 'input', 'text');" >	
<f:selectItem id="item3" itemLabel="Stepped Ramp Up" itemValue="steppedramp" />
</h:selectOneRadio>	
<h:outputLabel></h:outputLabel>
<h:panelGrid border="1" columns="2" style="height: 50px">	
<h:outputText value="No Of Users at startup" style="font-size: 14px; font-family: Times New Roman, Arial, Sans-Serif"></h:outputText>
<h:inputText disabled="true" style="width: 220px; height: 30px"></h:inputText> 
<h:outputText value="Duration of intermediate Steady State" style="font-size: 14px; font-family: Times New Roman, Arial, Sans-Serif"></h:outputText>
<h:inputText disabled="true" style="width: 220px; height: 30px"></h:inputText> 
<h:outputText value="No of Users to be added every second" style="font-size: 14px; font-family: Times New Roman, Arial, Sans-Serif"></h:outputText>
<h:inputText disabled="true" style="width: 220px; height: 30px"></h:inputText> 
</h:panelGrid>

</h:panelGroup>