How to maintain state of checkboxes of Datatable when data loaded via ajax.

Setup:
query-3.6.0
dataTables: dt-1.10.18

I have a script that dynamically creates a checkbox for every record returned by a query. I then need the user to be able to select records within the same group to allow editing.
Each record can belong to 1 of 3 group’s. L, P or I. What I am trying to do is; if a record is selected that belongs to group L, disable all the checkbox’s that do not belong to group L.
And to do exactly the same for a selected record belonging to group P, disable checkbox’s for record not belonging to group P. and the same for group I.

The issue I have is when a checkbox is selected the script runs the AJAX call again which overrides the previouly checkbox selection back to unchecked.
In the script I have tried to prevent the AJAX call happening by the inclusion of below but that does not work.:

$('#scheduleTable tbody').on('change', '.record-checkbox', function() {
event.stopImmediatePropagation(); 

Does anyone have any ideas,

The following is a reduced coipy of the script.

var selectedDisplayType = null;
var selectedRecordIDs = [];
ajax: {
    url: 'get_schedule.php',
    dataSrc: '',
},
// followed by all the other code for dataTables
drawCallback: function(settings) {
    $('#scheduleTable tbody input[type="checkbox"].record-checkbox').each(function() {
        var recordID = $(this).val();
        if (selectedRecordIDs.includes(recordID)) {
            $(this).prop('checked', true);
        }
    });
},
"initComplete": function(settings, json) {
    var selectedRecordIDs = [];
    var selectedDisplayType = null;

    function updateCheckboxes() {
        console.log("Updating checkboxes. Selected DisplayType:", selectedDisplayType);

        $('#scheduleTable tbody .record-checkbox').each(function() {
            var row = $(this).closest('tr');
            var currentDisplayType = row.find('td:eq(1)').text().trim();

            console.log("Selected DisplayType:", selectedDisplayType, "| Current Row DisplayType:", currentDisplayType);

            if (selectedDisplayType === 'L' && (currentDisplayType === 'P' || currentDisplayType === 'I')) {
                console.log("Disabling checkbox for row with DisplayType:", currentDisplayType);
                $(this).prop('disabled', true);
            } else if ((selectedDisplayType === 'P' || selectedDisplayType === 'I') && currentDisplayType === 'L') {
                console.log("Disabling checkbox for row with DisplayType:", currentDisplayType);
                $(this).prop('disabled', true);
            } else {
                $(this).prop('disabled', false); // Enable all rows that match the selected display type
            }
        });
    }

    $('#scheduleTable tbody').on('change', '.record-checkbox', function() {
        event.stopImmediatePropagation();
        var checkbox = $(this);
        var recordID = checkbox.val();
        var row = checkbox.closest('tr');
        var currentDisplayType = row.find('td:eq(1)').text().trim();

        console.log("Selected DisplayType for this checkbox:", currentDisplayType);

        if (checkbox.is(':checked')) {
            if (!selectedRecordIDs.includes(recordID)) {
                selectedRecordIDs.push(recordID);
            }

            if (selectedDisplayType === null) {
                selectedDisplayType = currentDisplayType;
                console.log("First checkbox selected, setting selectedDisplayType to:", selectedDisplayType);
            }

            updateCheckboxes();
        } else {
            selectedRecordIDs = selectedRecordIDs.filter(function(id) {
                return id !== recordID;
            });

            if (selectedRecordIDs.length === 0) {
                selectedDisplayType = null;
                console.log("No checkboxes selected, resetting selectedDisplayType.");
            }

            updateCheckboxes();
        }

        $('#editSelectedButton').prop('disabled', selectedRecordIDs.length === 0);
    });

    $('#clearAllCheckbox').on('change', function() {
        if ($(this).is(':checked')) {
            console.log("Clear All triggered, resetting all states.");

            $('.record-checkbox').prop('checked', false).prop('disabled', false);
            selectedRecordIDs = [];
            selectedDisplayType = null;
            $('#editSelectedButton').prop('disabled', true);
            $(this).prop('checked', false);

            console.log("Cleared all checkboxes and reset selectedDisplayType.");
        }
    });

}

You need to sign in to view this answers