Настройка:
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
Разрешение выбора нескольких флажков без запуска сценария AJAX-вызова [дубликат] ⇐ Jquery
Программирование на jquery
1729870937
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.");
}
});
}
Подробнее здесь: [url]https://stackoverflow.com/questions/79125212/allowing-multiple-checkboxs-to-be-selected-without-the-script-running-a-ajax-ca[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия