En este taller vamos a ver cómo se puede deshabilitar un elemento de
formulario de tipo radio button. Dicho de otra manera, vamos a ver la manera de
hacer que, al pulsar un campo tipo radio de un formulario, no cambie la opción
escogida por defecto en el código HTML de la página.
Se puede ver el
ejemplo en marcha bajo estas líneas. Observad que, al pulsar los radio button,
no cambia la opción escogida inicialmente, que es la primera.
Detalles previos
Los campos de formulario tipo radio se
manejan como un grupo. En la jerarquía de objetos del navegador quedan debajo
del objeto form y dentro de un array que toma el nombre asignado al grupo de
botones. Se puede ver esta formación en el artículo Control de
botones de radio en Javascript.
Solución
La manera de
solucionar este asunto que hemos implementado nosotros es definir una variable
con el índice del array del botón de radio que tiene que estar seleccionado.
Además tendremos una función que se llamará al hacer clic en cualquier botón de
radio que se encargará de seleccionar el botón de radio por defecto, de este
modo, aunque seleccionemos otro elemento del conjunto, se seleccionará
automáticamente el elemento marcado por defecto. Además, la función recibirá el
índice del botón de radio pulsado y le retirará el foco de la aplicación de
dicho elemento.
Podemos ver el código a continuación.
<html>
<head>
<title>Ejemplo para deshabilitar radio butons</title>
<script>
indice_marcado = 0
function
deshabilitar(formulario,idradio){
formulario.miradio[indice_marcado].checked = true
formulario.miradio[idradio].blur()
}
</script>
</head>
<body>
<h1>Ejemplo para deshabilitar radio
butons</h1>
<form name="f1">
<input type="radio"
name="miradio" value="Lo que sea" onclick="deshabilitar(this.form,0)"
checked> Hola ponte encima!
<br>
<input type="radio"
name="miradio" value="otra cosa" onclick="deshabilitar(this.form,1)"> Ponte
aquí tambien
<br>
<input type="radio" name="miradio" value="más
cosas" onclick="deshabilitar(this.form,2)"> Ponte aquí tambien
</form>
</body>
</html>
En los
elementos de formulario de tipo radio button tenemos el manejador de eventos
onclick que se llama cuando se hace clic en un ese botón de radio. Dicho
manejador de eventos llama a una función pasándole el formulario donde estamos
trabajando y el índice del botón de radio actual, que empieza en cero.
La función deshabilitar(), definida en el bloque de script de la
cabecera, contiene dos sentencias. La primera vuelve a poner la selección en el
botón de radio adecuado, utilizando la propiedad checked del radiobutton, y la
segunda retira el foco del elemento pulsado, con el método blur(). |
Nombre del Tutorial
Visitas
Ir arriba