Skip to main content
se eliminaron 53 caracteres en el cuerpo
Origen Enlace
user128299
user128299

No requieres de JQuery para realizar dicha acción, podemosPodemos 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

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

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

se eliminaron 60 caracteres en el cuerpo
Origen Enlace
user128299
user128299

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 en 2 variables a:
    • Etiqueta padre
    • Conjunto de inputs con la clase en común
  • 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

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 en 2 variables a:
    • Etiqueta padre
    • Conjunto de inputs con la clase en común
  • 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

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

se eliminaron 97 caracteres en el cuerpo
Origen Enlace
user128299
user128299

No requieres de JQuery para realizar dicha acción, podemos auxiliarnos de previousElementSiblingpreviousElementSibling 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 en 2 variables a:
    • Etiqueta padre
    • Conjunto de inputs con la clase en común
  • 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

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 en 2 variables a:
    • Etiqueta padre
    • Conjunto de inputs con la clase en común
  • 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

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 en 2 variables a:
    • Etiqueta padre
    • Conjunto de inputs con la clase en común
  • 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

Origen Enlace
user128299
user128299
Loading