Разрешение выбора нескольких флажков без запуска сценария AJAX-вызова [дубликат]Jquery

Программирование на jquery
Ответить
Anonymous
 Разрешение выбора нескольких флажков без запуска сценария AJAX-вызова [дубликат]

Сообщение Anonymous »

Настройка:
query-3.6.0
dataTables: dt-1.10.18
Я бы посоветовал прочитать мое сообщение полностью, прежде чем оно будет отмечено как закрытый вопрос. Использование плагина флажка dataTables не отвечает на мой вопрос.
У меня есть сценарий, который динамически создает флажок для каждой записи, возвращаемой запросом. Затем мне нужно, чтобы пользователь мог выбирать записи в одной группе, чтобы разрешить редактирование.
Каждая запись может принадлежать к 1 из 3 групп. L, P или I. Я пытаюсь сделать следующее: если выбрана запись, принадлежащая группе L, отключите все флажки, не принадлежащие группе L.
А чтобы сделать то же самое для выбранной записи, принадлежащей группе P, отключите флажки для записи, не принадлежащей группе. P. и то же самое для группы I.
У меня проблема заключается в том, что когда флажок установлен, сценарий снова запускает вызов AJAX, который отменяет предыдущий выбор флажка обратно на непроверенный.
В сценарии я пытался предотвратить вызов AJAX, включив приведенное ниже, но это не сработало.:
$('#scheduleTable tbody').on('change', '.record-checkbox', function() {
event.stopImmediatePropagation();

Есть ли у кого-нибудь идеи?
Ниже приведена уменьшенная копия сценария.
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.");
}
});

}


Подробнее здесь: https://stackoverflow.com/questions/791 ... -a-ajax-ca
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Jquery»