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
entrue
- Si no tiene el elemento previo el
checked
comotrue
entonces se lo notificamos y al elemento que disparó el evento click le mantenemos su atributochecked
enfalse
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