Habilitar campos por varios radiobuttons

diego_gr06 · #1 (**permalink**) 29/10/2011, 09:21

Hola. En un campo de un determinado formulario quiero que se habiliten campos de texto en función de haber chequeado un radio button o no. Es decir, tengo tres opciones a través de radiobuttons y si clickeo la primera opción, se me activa su campo asociado. si clickeo la segunda, se activa, etc... lo que no logro hacer es que al clickar la segunda opción, se active el campo asociado a esta pero se desactive el primero.

os dejo lo que tengo:

Código HTML:

<script>
function modificarEstado(){
	if(document.getElementById("opcion1").checked)
		document.getElementById("campo1").disabled =false;
	else
		document.getElementById("campo1").disabled=true;
}
function modificarEstado1(){
	if(document.getElementById("tramite").checked)
		document.getElementById("fechaoficial").disabled =false;
	else
		document.getElementById("fechaoficial").disabled=true;		
}	


</script>
	<input type="radio"  name="opciones" id="opcion1" value="opcion1" onclick="modificarEstado()">
	<label>Opción 1</label> 
    <input type="text" disabled="disabled" name="campo1" id="campo1" value="" style="width: 50px"><br>
	
	<input type="radio"  name="opciones" id="opcion2" value="opcion2" onclick="modificarEstado1()">
	<label>Opción 2</label> 
    <input type="text" disabled="disabled" id="campo2" name="campo2" style="width: 50px"><br>
	
	<input type="radio"  name="opciones" id="opcion3" value="opcion3">
    Sin campo de texto a habilitar o deshabilitar si se selecciona esta opción<br>

Como lo hago para que si selecciono la opción 2 por ejemplo, el campo asociado de la opción 2 se habilite (que eso sí lo tengo) pero el de la una se deshabilite? Es decir, si yo de partida selecciono la opción 2, se habilita su campo asociado y el de la opción 1 sigue deshabilitado. Pero si, yo cambio de parecer, y después de previamente seleccionar la opción 2, ahora cambio de idea y selecciono la opción 1, el campo asociado a la opción 1 se habilita pero el de la opción 2, que era el que inicialmente elegí, no se deshabilita.

Me ayudáis?

gracias

Raziel_Ravenheart · #2 (**permalink**) 29/10/2011, 10:14

Mi respuesta sería la siguiente

Código HTML:

Ver original<html>
<head>
<script type="text/javascript" >
window.onload = function () {
    document.getElementById("opcion1").onclick = modificarEstado;
    document.getElementById("opcion2").onclick = modificarEstado;
}
 
function modificarEstado(){
    if (document.getElementById("opcion1").checked) {
        document.getElementById("campo1").disabled = false;
        document.getElementById("campo2").disabled = true;
    } else {
        document.getElementById("campo1").disabled = true;
        document.getElementById("campo2").disabled = false;
    }
}
 
function modificarEstado1(){
    if(document.getElementById("tramite").checked) {
        document.getElementById("fechaoficial").disabled =false;
    } else {
        document.getElementById("fechaoficial").disabled=true;
    }
}   
 
 
</script>
</head>
<body>
<input type="radio"  name="opciones" id="opcion1" value="opcion1" >
<label>Opción 1</label> 
<input type="text" disabled="disabled" name="campo1" id="campo1" value="" style="width: 50px"><br>
    
<input type="radio"  name="opciones" id="opcion2" value="opcion2" >
<label>Opción 2</label> 
<input type="text" disabled="disabled" id="campo2" name="campo2" style="width: 50px"><br>
    
<input type="radio"  name="opciones" id="opcion3" value="opcion3">
Sin campo de texto a habilitar o deshabilitar si se selecciona esta opción<br> 
</body>
</html>

Recuerda que es recomendado abrir y cerrar llaves, así el if o cualquier otra esttructura de control tenga no más una línea de código. Y básicamente es por cadda if revertir el proceso del otro. También para limpiar el código html, utilicé manejadores de eventos semánticos, es decir:

Código Javascript:

Ver originalwindow.onload = function () {
    document.getElementById("opcion1").onclick = modificarEstado;
    document.getElementById("opcion2").onclick = modificarEstado;
}

Lo que quiere decir que apenas carga todo el contenido de la ventana, asigna las acciones a los botones de radio.

Ojala te sirva

Exitos