Skip to main content
3 de 4
se eliminaron 60 caracteres en el cuerpo
user avatar
user avatar

No requieres de JQuery para realizar dicha acción, podemos auxiliarnos de previousElementSibling para leer al elemento predecedor.

Entonces podemos proceder de esta forma:

  • Envuelve los elementos en una etiqueta padre
  • A la etiqueta padre dale una clase
  • A los elementos internos dales una clase en común, (menos al primer checkbox)
  • Por medio de JavaScript recuperamos a:
    • Etiqueta padre
  • Leemos el evento click de la variable que contiene la representación dde la etiqueta padre
  • Como estamos trabajando con la delegación de eventos, evaluamos si quien disparó dicho evento (el click) contiene la clase checados-elemento que es la clase asignada a todos los checkboxes
  • De ser cierto el punto anterior, entonces evaluamos en un condicional si el elemento previo de quien disparó el evento click no tiene el atributo checked en true
  • Si no tiene el elemento previo el checked como true entonces se lo notificamos y al elemento que disparó el evento click le mantenemos su atributo checked en false para lograr la funcionalidad deseada

        <div class="checados">
            1. <input id="1" type="checkbox">
            2. <input id="2" class="checados-elemento" type="checkbox">
            3. <input id="3" class="checados-elemento" type="checkbox">
            4. <input id="4" class="checados-elemento" type="checkbox">
            5. <input id="5" class="checados-elemento" type="checkbox">
        </div>

        <script>
          const listado = document.querySelector('.checados');
          
          listado.addEventListener('click', (evento) => {
              if (evento.target.classList.value === 'checados-elemento') {
                if (!evento.target.previousElementSibling.checked) {
                  console.log('Acción no permitida');
                  evento.target.checked = false;
                }
              }
          })
        </script>

Por cierto

No le agregué la clase al primer elemento de los 5 checkboxes por que al no tener un elemento previo y en concencuencia ser el primero de la lista, nos daría un error como este:

"TypeError: Cannot read property 'checked' of null

user128299