Taller de Javascript para deshabilitar botones de radio para que, al pulsarlos, quede siempre marcada la opción por defecto.

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.

Hola ponte encima!
Ponte aquí tambien
Ponte aquí tambien

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.



    Ejemplo para deshabilitar radio butons


Ejemplo para deshabilitar radio butons

Hola ponte encima!

Ponte aquí tambien

Ponte aquí tambien


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().