2

estoy intenando realizar un desarrollo, pero necesito ayuda al implementar codigo con jquery, dado que requiero realizar unas validaciones a cada checkbox clickeado.

En la imagen se ve un indicador amarillo "obl" en algunas filas, la cosa es que requiero que no se pueda dar check a un registro (fila) sin que el anterior ya este en check siempre y cuando este el indicador amarillo "obl" en el anterior.

Es decir para que se pueda hacer check en el registro con el numero 47 es requerido que el check del numero 48 ya este y así sucesivamente para atrás.

he intentado usar en jquery funciones como foreach con reverse() pero nada me soluciona el requerimiento.

he intentado realizar algo así pero me trae todas las filas de para atrás y necesito que me traiga las filas para atrás a partir de una.

  $($(".ord_select").get().reverse()).each(function() {
      trActual = $(this).closest('tr');
      ind_anterior=trActual.find('.ord_select').val();
      console.log('anterior ' +ind_anterior);
    })

Todas las filas tienen la clase ord_select, pero las que tienen el boton amarillo "obl" tienen ademas una clase "sta_lineal"

el html de una parte de la tabla seria asi

<tbody>
        <tr>
            <td><center><input id="48" class="ord_select sta_lineal" name="orden" type="checkbox" value="48"></center></td>
            <td><center>
                <span class="badge badge-warning" style="background-color: #ffc107;">Obl</span>
            </center></td>
            <td><center>48</center></td>
            <td><center>PENSION MES DE AGOSTO 2020</center></td>
            <td><center>2020</center></td>
            <td><center>2020-07-10</center></td>
            <td><center>$ 120000.00</center></td>
            <td><center>$ 0.00</center></td>
            <td><center>$ 120000</center>
               <input class="val_total" name="val_total" type="hidden" value="120000">
            </td>
        </tr>
        <tr>
            <td><center><input id="50" class="ord_select " name="orden" type="checkbox" value="50"></center></td>
            <td></td>
            <td><center>50</center></td>
            <td><center>OTRO PAGO NO OBLIGATORIO</center></td>
            <td><center>2020</center></td>
            <td><center>2020-07-16</center></td>
            <td><center>$ 50000.00</center></td>
            <td><center>$ 0.00</center></td>
            <td><center>$ 50000</center>
                <input class="val_total" name="val_total" type="hidden" value="50000">
            </td>
        </tr>
        <tr>
            <td><center><input id="47" class="ord_select sta_lineal" name="orden" type="checkbox" value="47"></center></td>
            <td><center>
                <span class="badge badge-warning" style="background-color: #ffc107;">Obl</span>
            </center></td>
            <td><center>47</center></td>
            <td><center>PENSIÓN MES DE JULIO 2020</center></td>
            <td><center>2020</center></td>
            <td><center>2020-07-17</center></td>
            <td><center>$ 120000.00</center></td>
            <td><center>$ 0.00</center></td>
            <td><center>$ 120000</center>
                <input class="val_total" name="val_total" type="hidden" value="120000">
            </td>
        </tr>
        <tr>
            <td><center><input id="49" class="ord_select sta_lineal" name="orden" type="checkbox" value="49"></center></td>
            <td><center>
                <span class="badge badge-warning" style="background-color: #ffc107;">Obl</span>
            </center></td>
            <td><center>49</center></td>
            <td><center>PENSION MES DE AGOSTO 2020</center></td>
            <td><center>2020</center></td>
            <td><center>2020-08-03</center></td>
            <td><center>$ 120000.00</center></td>
            <td><center>$ 0.00</center></td>
            <td><center>$ 120000</center>
                <input class="val_total" name="val_total" type="hidden" value="120000">
            </td>
        </tr>
</tbody>

Agradecería mucho si me pudieran brindar ayuda o asesoría.

Espero que se haya entendido lo que requiero hacer gracias.

introducir la descripción de la imagen aquí

1
  • Hola @Andy, ¿es necesario que sea solamente con jQuery o se puede utilizar JavaScript puro? Commented el 12 jul. 2020 a las 21:12

3 respuestas 3

1

requiero que no se pueda dar check a un registro (fila) sin que el anterior ya este en check siempre y cuando este el indicador amarillo "obl" en el anterior.

Tomando como base que la discriminado solo se realiza para aquellos input que tenga anterior a ellos una clase llamada «sta_lineal».

Tienes el enfoque correcto al usar .each.
Debemos iterar sobre cada unos de los inputs en búsqueda de una clase (sta_lineal).

Cada uno de ellos pasaran por dos comprobaciones de tipo if...else
En la primera determina si el input tiene la clase con el nombre sta_lineal de ser así pasa a la segunda instancia, comprobara cual es el estado de la casilla de verificación, de no estar seleccionada el siguiente input tiene que estar de igual manera por ende lo desmarca.

$('.ord_select').click(function () {
    $('.ord_select').each(function () {
        if ($(this).hasClass('sta_lineal') == true) {
            if ($(this).prop('checked') == false)
                $(this).next().prop('checked', false)
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tbody>
   <tr>
      <td>1. <input id="1" class="ord_select" type="checkbox"></td>
      <td>2. <input id="2" class="ord_select sta_lineal" type="checkbox"></td>
      <td>3. <input id="3" class="ord_select" type="checkbox"></td>
      <td>4. <input id="4" class="ord_select sta_lineal" type="checkbox"></td>
      <td>5. <input id="5" class="ord_select sta_lineal" type="checkbox"></td>
      <td>6. <input id="6" class="ord_select" type="checkbox"></td>
      <td>7. <input id="7" class="ord_select sta_lineal" type="checkbox"></td>
      <td>8. <input id="8" class="ord_select" type="checkbox"></td>
   </tr>
</tbody>

1
  • Excelente amigo. Esa respuesta me ayudo mucho a solucionar el problema Commented el 13 jul. 2020 a las 1:23
1

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

1
  • Hola Amigo muchas gracias por su respuesta, He intentado adaptar su codigo al mio, pero no me esta funcionando cuando envuelvo los elementos en la etiqueta padre con <tbody>, pero me funciona cuando lo hago con una etiqueta <div> y como es una tabla necesito agrupar los elementos con un tbody pero no funciona. Aqui estoy ensayando jsfiddle.net/ynas6f2w Commented el 11 jul. 2020 a las 20:06
0

Este codigo no es mio pero se acerca a lo que necesitas, solo adecuas a tu necesidad

<script languaje="javascript">

function habilitaDeshabilita(form)

{

    if (form.boletin.checked == true)

    {

    form.intereses[0].disabled = false;
    form.intereses[1].disabled = false;
    form.intereses[2].disabled = false;

    }

 

    if (form.boletin.checked == false)

    {

    form.intereses[0].disabled = true;
    form.intereses[1].disabled = true;
    form.intereses[2].disabled = true;

    }

 

}
</script>

Aqui la liga : Objetos radio y checbox

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.