En este taller vamos a ver cómo se puede deshabilitar un elemento de formulario de tipo radio button con Javascript. 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.

Este ejemplo puede ser útil cuando no quieres usar la opción disabled de los radio button. En vez de ello, vamos a detectar los eventos click sobre los elementos de radio y remarcar de nuevo la opción definida de manera predeterminada. Además, aprenderás a acceder a elementos de radio y recorrerlos con un bucle forEach.

Atributo disabled del HTML

Lo primero que quiero mostrar es un ejemplo sobre cómo podemos deshabilitar un conjunto de radio buttons solo con HTML, porque sería la primera opción:

<form>
  <input type="radio" name="opcion" id="opcion1" disabled checked> <label for="opcion1">Opción 1</label>
  <br>
  <input type="radio" name="opcion" id="opcion2" disabled> <label for="opcion2">Opción 2</label>
  <br>
  <input type="radio" name="opcion" id="opcion3" disabled > <label for="opcion3">Opción 3</label>
</form>

Este ejemplo ya es perfectamente suficiente para que los radio button aparezcan desactivados, solo que la interfaz aparecerá en gris, como si estuviera desactivada. Si lo hacemos con Javascript la interfaz aparecerá con el color normal, como si estuviera activa.

Entendiendo los elementos radio button

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 en detalle esta información en el artículo Control de botones de radio en Javascript.

Tenemos un formulario como este:

<form id="formulario">
  <input type="radio" name="elementoradio" id="elementoradio1" checked> <label for="elementoradio1">Opción 1</label>
  <br>
  <input type="radio" name="elementoradio" id="elementoradio2"> <label for="elementoradio2">Opción 2</label>
  <br>
  <input type="radio" name="elementoradio" id="elementoradio3"> <label for="elementoradio3">Opción 3</label>
</form>

Ahora, para acceder a ellos podemos hacerlo a través del objeto formulario, de esta manera:

let formulario = document.getElementById('formulario');
let elementosRadio = formulario['elementoradio'];

• Primero accedemos al formulario con getElementById
• Luego accedemos a los elementos de radio con su nombre, usando el objeto del formulario.

Esto nos dará un conjunto de elementos NodeList de Radio.

Otro medio de acceso a los elementos sería a partir de su nombre. Pero tenemos que asegurarnos que el nombre usado en los elementos de radio sea único y no se haya usado ese mismo name para otros elementos de otros formularios.

let elementosRadio = document.getElementsByName('elementoradio');

Función para inhibir los elementos de radio

Una manera de conseguir nuestro objetivo y que podamos reutilizar el código en varios sitios sería crear una función que se encargue de inhibir los campos del formulario.

Esa función recibirá el nombre de los elementos de radio que queremos desactivar. Se encargará de un par de cosas:

• Definir una variable para almacenar una referencia al botón de radio que tiene que estar seleccionado, averiguando el elemento que está seleccionado en un momento dado.
• Definir un manejador de evento 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 retirará el foco de la aplicación del elemento sobre el que se ha hecho clic.

Podemos ver el código a continuación.

function inhibir(nombreRadioButtons) {
  let radios = document.getElementsByName(nombreRadioButtons);
  let seleccionado = obtenerRadioSeleccionado(radios);
  radios.forEach(radio => {
    radio.addEventListener('click', function () {
      seleccionado.checked = true;
      this.blur();
    });
  });
}

function obtenerRadioSeleccionado(radios) {
  let radiosArray = Array.from(radios);
  return radiosArray.find((campo) => campo.checked)
}

Como puedes ver, hemos accedido a los botones de radio usando su nombre, el cual es recibido por la función. Luego, calculamos el elemento que está seleccionado. Por último se define un evento "click" para cada uno de los elementos de radio.

El manejador de eventos click se llama cuando se hace clic en un ese botón de radio. Dicho manejador de eventos se encarga de volver a poner cheked=true en el elemento seleccionado originalmente, con lo que se vuelve siempre a marcar como seleccionado el elemento que estaba al principio. Además se retira el foco con blur().

Ya solo nos quedaría llamar a la función inhibir() enviando el nombre de los radiobuttons con los que queremos operar.

document.addEventListener('DOMContentLoaded', function () {
  inhibir('miradio');
});

Código completo de desactivar los radio button

Por si existe alguna duda sobre cómo montar las distintas piezas de este ejercicio, dejamos el código completo para que lo puedas analizar con calma.

<html>

<head>
  <title>Ejemplo para deshabilitar radio butons</title>
</head>

<body>
  <h1>Ejemplo para deshabilitar radio butons</h1>

  <form name="f1">
    <input type="radio" name="miradio" value="Lo que sea" checked> Hola ponte encima!
    <br>
    <input type="radio" name="miradio" value="otra cosa"> Ponte aquí tambien
    <br>
    <input type="radio" name="miradio" value="más cosas"> Ponte aquí tambien
  </form>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      inhibir('miradio');
    });
    function inhibir(nombreRadioButtons) {
      let radios = document.getElementsByName(nombreRadioButtons);
      let seleccionado = obtenerRadioSeleccionado(radios);
      radios.forEach(radio => {
        radio.addEventListener('click', function () {
          seleccionado.checked = true;
          this.blur();
        });
      });
    }

    function obtenerRadioSeleccionado(radios) {
      let radiosArray = Array.from(radios);
      return radiosArray.find((campo) => campo.checked)
    }
  </script>

</body>

</html>

Esperamos que te haya resultado de utilidad este ejemplo de trabajo con botones de radio en Javascript.