I am managing a switch(on/off)
to validate if a user is active or inactive, the problem is that when clicking on a different switch (per user) the console doubles, triples, etc, the server response number of times I have changed the states of the users, that is, if I have changed the status of 3 users at the same time the server returns 6 responses.
How to make the console take me only one value per switched switch?
PHP CODE
foreach ($values as $value)
{
if($value->estado == 1):
$output = "<input type='checkbox' data-id='{$value->id}' checked class='item' onclick='change({$value->estado})'> ";
else:
$output = "<input type='checkbox' data-id='{$value->id}' class='item' onclick='change({$value->estado})'>";
endif;
echo "<tr>
<td>{$value->codigocurso}</td>
<td>{$value->nombre}</td>
<td>{$value->email}</td>
<td>{$value->id}</td>
<td>
<div class='switch'>
<label>
Inactivo
{$output}
<span class='lever'></span>
Activo
</label>
</div>
</td>
<td><button class='btn waves-light red'>Eliminar</button></td>
</tr>";
}
jQuery
function change(ids){
$(".switch").find("input[type=checkbox]").on("change",function(e) {
e.preventDefault();
let checked = $(this).prop('checked');
let id = $(this).data('id');
$.ajax({
url: 'http://localhost/conexion/controllers/HomeClass.php/updatestate',
type: 'POST',
data: {'id': id, 'checked' : checked}
})
.done(function(resp) {
console.log(resp) ;
if(resp == ''){
M.toast({html: 'Estado Cambiado', classes: 'rounded'});
}
})
.fail(function() {
console.log("error");
});
});
}