jeudi 26 novembre 2020

Change checkbox value of javascript generated checkbox

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