Foros del Web » Programando para Internet » Javascript »

Habilitar campos por varios radiobuttons

Estas en el tema de Habilitar campos por varios radiobuttons en el foro de Javascript en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 29/10/2011, 09:21
 
Fecha de Ingreso: noviembre-2010
Ubicación: españa
Mensajes: 29
Antigüedad: 13 años, 4 meses
Puntos: 0
Habilitar campos por varios radiobuttons

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
  #2 (permalink)  
Antiguo 29/10/2011, 10:14
Avatar de Raziel_Ravenheart  
Fecha de Ingreso: agosto-2011
Ubicación: Ibagué, Tolima
Mensajes: 192
Antigüedad: 12 años, 7 meses
Puntos: 37
Exclamación Respuesta: Habilitar campos por varios radiobuttons

Mi respuesta sería la siguiente

Código HTML:
Ver original
  1. <script type="text/javascript" >
  2. window.onload = function () {
  3.     document.getElementById("opcion1").onclick = modificarEstado;
  4.     document.getElementById("opcion2").onclick = modificarEstado;
  5. }
  6.  
  7. function modificarEstado(){
  8.     if (document.getElementById("opcion1").checked) {
  9.         document.getElementById("campo1").disabled = false;
  10.         document.getElementById("campo2").disabled = true;
  11.     } else {
  12.         document.getElementById("campo1").disabled = true;
  13.         document.getElementById("campo2").disabled = false;
  14.     }
  15. }
  16.  
  17. function modificarEstado1(){
  18.     if(document.getElementById("tramite").checked) {
  19.         document.getElementById("fechaoficial").disabled =false;
  20.     } else {
  21.         document.getElementById("fechaoficial").disabled=true;
  22.     }
  23. }  
  24.  
  25.  
  26. </head>
  27. <input type="radio"  name="opciones" id="opcion1" value="opcion1" >
  28. <label>Opción 1</label>
  29. <input type="text" disabled="disabled" name="campo1" id="campo1" value="" style="width: 50px"><br>
  30.    
  31. <input type="radio"  name="opciones" id="opcion2" value="opcion2" >
  32. <label>Opción 2</label>
  33. <input type="text" disabled="disabled" id="campo2" name="campo2" style="width: 50px"><br>
  34.    
  35. <input type="radio"  name="opciones" id="opcion3" value="opcion3">
  36. Sin campo de texto a habilitar o deshabilitar si se selecciona esta opción<br>
  37. </body>
  38. </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 original
  1. window.onload = function () {
  2.     document.getElementById("opcion1").onclick = modificarEstado;
  3.     document.getElementById("opcion2").onclick = modificarEstado;
  4. }

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

Etiquetas: campos, deshabilitar, habilitar, radiobuttons
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:15.