Inhibir radio button con Javascript

  • Por
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.

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

Podemos ver el ejemplo en marcha en una página aparte.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Rigoberto Pinto

14/10/2007
El ejemplo anterior ya te bloquea directamente el elemento 0 este codigo te deja selecionar el que tu desees luego de bloquea y si deseas debloquer te pide q confirmes.
<html>
<head>
<title>Ejemplo para deshabilitar radio butons</title>
<script>

seleccion=0;
idmarcado=0

function deshabilitar(formulario,idradio){
if (!seleccion){
formulario.miradio[idradio].checked=true;
idmarcado=idradio;
seleccion=1;
}else
{
formulario.miradio[idmarcado].checked=true;
if(confirm("Desea Corregir Su seleccion")){
seleccion=0;
}
}
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>

vladimir rujano

18/9/2010
NO SE INHIBE EL RADIO BUTTON
MUY INTERESANTE ESTE EJEMPLO PERO NO SE INHIBE EL RADIO BUTTON CUANDO SE DESPLIEGA EL "EJEMPLO EN MARCHA". UN SALUDO