Hola estoy haciendo un sistema en el cual asigno un aprobador a un proyecto pero no es obligatorio asignar un aprobador por eso lo hago por medio de un radionButtom, si la persona selecciona SI se desglosan tres campos y si es NO se ocultan esos campos eso ya logre hacerlo, pero el problema es que cuando la selección del radioButtom sean Si quiero que los tres campos que se desglosan sean obligatorios y si es No no sean obligatorios.
Ojala alguien pueda ayudarme, anexo el código.
<div class="form-group input-group">
<span class="input-group-addon">Asignar Aprobador: </span>
<p:selectOneRadio class="form-control" onclick="show(this.value)" value="#{projectsBean.proyectos.approver}" >
<f:selectItem itemLabel="Si" itemValue="Si"/>
<f:selectItem itemLabel="No" itemValue="No" >
</f:selectItem>
</p:selectOneRadio>
</div>
<div class="form-group input-group" style="display:none" id="ar">
<span class="input-group-addon">* Área del aprobador: </span>
<h:selectOneMenu class="form-control" id="area" value="#{projectsBean.area}" requiredMessage="* Obligatorio - Área">
<f:selectItem itemLabel="-- Seleccionar --" itemValue="#{null}"/>
<f:selectItems value="#{loginBean.listAreas}"/>
<f:ajax execute="area" render="role"/>
</h:selectOneMenu>
</div>
<div class="form-group input-group" style="display:none" id="rol">
<span class="input-group-addon">* Rol del aprobador: </span>
<h:selectOneMenu class="form-control" id="role" value="#{projectsBean.rol}" requiredMessage="* Obligatorio - Rol">
<f:selectItem itemLabel="-- Seleccionar --" itemValue="#{null}"/>
<f:selectItems value="#{projectsBean.listRol}"/>
<f:ajax execute="role" render="perso"/>
</h:selectOneMenu>
</div>
<div class="form-group input-group" style="display:none" id="per">
<span class="input-group-addon">* Nombre del aprobador </span>
<h:selectOneMenu class="form-control" id="perso" value="#{projectsBean.aprovador}" requiredMessage="* Obligatorio - Nombre de la Persona">
<f:selectItem itemLabel="-- Seleccionar --" itemValue="#{null}"/>
<f:selectItems value="#{projectsBean.listEmpleado}"/>
</h:selectOneMenu>
</div>
Este es el script que muestra y oculta los campos
<script type="text/javascript">
function show(type) {
switch (type) {
case 'No' :
document.getElementById("ar").style.display = "none";
document.getElementById("rol").style.display = "none";
document.getElementById("per").style.display = "none";
break;
case 'Si' :
document.getElementById("ar").style.display = "block";
document.getElementById("rol").style.display = "block";
document.getElementById("per").style.display = "block";
break;
}
}
</script>