Good afternoon.
I'm building a table where one column is a checkbox generated for each row, this checkbox calls a function that will confirm an operation, using a modal with two buttons, and then manually check or uncheck the checkbox depending on the answer.
The problem is that everytime I click 'No' on the modal, it changes the state of every checkbox in the column, not just the one of the row.
How can I make this function to change the state of the rows checkbox?
Here is the checkbox creation:
"data": 'data',
render: function (data, type, row) {
var checkbox = $('<input type="checkbox" id="checkbox_' + row.idPlayer + '" onchange="playerDeleteChange(this,' + row.idPlayer + ')">');
if (row.isDeleted) {
checkbox.attr("checked", "checked");
checkbox.addClass("checkbox_checked");
} else {
checkbox.addClass("checkbox_unchecked");
}
return checkbox.prop("outerHTML");
}
Here the function it calls:
function playerDeleteChange(checkbox, idPlayer) {
$('#deleteModal').modal('show');
if (checkbox.checked === true) {
document.getElementById('deleteModalText').style.display = "block";
document.getElementById('deleteWarningMsg').style.display = "block";
document.getElementById('recoverModalText').style.display = "none";
} else {
document.getElementById('deleteModalText').style.display = "none";
document.getElementById('deleteWarningMsg').style.display = "none";
document.getElementById('recoverModalText').style.display = "block";
}
$('#btnPlayerDelete').click(function () {
if (checkbox.checked === true) {
gotoDeletePlayer(idPlayer);
$(checkbox).prop('checked', true);
} else {
gotoUndeletePlayer(idPlayer);
$(checkbox).prop('checked', false);
}
$('#deleteModal').modal('hide');
});
$('#btnPlayerCancelDelete').click(function () {
if (checkbox.checked === true) {
$(checkbox).prop('checked', false);
} else {
$(checkbox).prop('checked', true);
}
$('#deleteModal').modal('hide');
});
}
Aucun commentaire:
Enregistrer un commentaire