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