Validation checkbox group with javascript or jquery

Question

Validation checkbox group with javascript or jquery

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

searching the web I can not find the solution, so I ask for help, I need to validate a checkbox group that is generated for each row of a table, what I need is that you can select a check only if the row previous one was selected first, that is to say for example that of an error if I want to select the check in row 3, without first selecting the one in row 2, this is the table where the check is generated:

<table  class="table table-striped table-bordered table-hover dataTable">
<thead>
  <tr> <!-- encabezado de tabla -->
    <td colspan="4" bgcolor="#58acfa">
    <p style="color:#ffffff";><strong>TODAS LAS CUOTAS</strong></p>
    </td> 
    </tr>
	<tr>
     <th><center>Cuotas</center></th>
     <th><center>Importe</center></th>
	 <th><center>Fecha de Vencimiento</center></th>                                   
	 <th style="width: 20%;"><center>PAGAR</center></th>
     </tr>
</thead>
<tbody>
   <?php
 if (count($cuentas) > 0) {
	if (is_array($cuentas)) {
	 foreach ($cuentas as $cuenta):
   ?>
<tr>
  <td style="font-family: 'Open Sans', sans-serif;"><center><?php echo element('cuotas', $cuenta); ?></center></td>
  <td style="font-family: 'Open Sans', sans-serif;"><center><?php echo element('importe', $cuenta); ?></center></td>
  <?php $fechaVencimiento = element('fechaVencimiento', $cuenta); ?>
  <td style="font-family: 'Open Sans', sans-serif;"><center><?php echo $fechaVencimiento;?></center></td>
  <td>
  <center>
<input type="checkbox">
  </center>
  </td>
  </tr>
  <?php
endforeach;
}
}
  ?>
</tbody>
</table>

javascript jquery codeigniter

asked by Fede 12.11.2018 в 14:39

source

2 answers

0

You can do it like this: but you must use an incremental id for each checkbox

    var el = (s) => document.querySelectorAll(s);
    check = el('input[type="checkbox"]');
    for (var i = 0; i <= check.length - 1; i++) {
        check[i].addEventListener("change", (e) => {
            e.preventDefault();
            let current = e.target.id.substring(1);
            if (current != 0) {
                let before = document.querySelector("#n" + (current - 1));
                if (before.checked == false) {
                    alert("debes darle checked al checkbox anterior");
                    e.target.checked = false;
                }
            }
        })
    }

    <label><input type="checkbox" id="n0"  class="numero1"> Este es mi primer checkbox</label><br>
    <input type="checkbox" id="n1" > <label for="cbox2">Este es mi segundo a clickear</label><br>
    <label><input type="checkbox" id="n2" > Este es mi primer checkbox</label><br>

answered by 12.11.2018 в 15:47

c ++ error 'const class std :: vectorNode' has no member named 'find'; Two Foreign Keys to the Same Field?

score 2 · Accepted Answer

Here I give you an example that you might find useful:

$('input').click(comprueba_anterior_seleccionado);

function comprueba_anterior_seleccionado () {
    if ($(this).prop('checked') == true) {
      if ($(this).parents('tr').prev('tr').find('input').prop('checked') == false) {
          alert('Anterior no clickado');
          $(this).prop('checked', false)
      }  
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="checkbox"> Prueba
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox"> Prueba
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox"> Prueba
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox"> Prueba
    </td>
  </tr>
</table>

What I do is move around DOM until I get to the tr parent of the ckeckbox that was clicked, then jump to the previous tr and I look for a input there. If you find that it is not selected, undo the one that remains marked and ready.