Как правильно включить/отключить родительский раздел на основе выбора дочернего элемента? ⇐ Jquery

[Anonymous]

У меня есть сценарий, в котором я динамически создаю дочерние кнопки для родительского раздела, и мне нужно управлять состоянием родительского раздела в зависимости от того, выбраны или не выбраны дочерние разделы. Родительский элемент следует включать только в том случае, если все дочерние кнопки не выбраны. Однако мой текущий подход не работает должным образом: когда я отменяю выбор одного дочернего элемента, родительский элемент остается отключенным, хотя другие дочерние элементы все еще не выбраны.
ниже приведен код:

Код: Выделить всё

   const configComboBoxEvent = function(calendar, controller, storeId, sectionId, errorLog){
// 店舗名の変更時の処理
$(storeId).on('change', function() {
const selectedStoreId = $(this).val();  // Get the storeId value from the select input

if (selectedStoreId) {
$.ajax({
url: `/${controller}/xxx`,
type: 'POST',
data: { storeId: selectedStoreId },
dataType: "json",
cache: false
})
.done(function(data) {
$(sectionId).empty();
let ids = [];
let parentSections = {};  // Store sections grouped by their parent section
let childSections = {};  // Store child sections by their parent

data.forEach(function(item) {
if (item.section_groups && item.section_groups.section_children_id) {
let childrenIds = item.section_groups.section_children_id.split(',');

// Group parent section with its children
parentSections[item.id] = {
section_name: item.section_name,
children: childrenIds
};

childrenIds.forEach(function(childId) {
childSections[childId] = true;
});
} else {
// If section has no children, just display as a separate section (if not already a child)
if (!childSections[item.id]) {
const button = $('', {
text: item.section_name,
'id': item.id,
'class': 'button-location-style',
click: function() {
var index = ids.indexOf(item.id);
if (index > -1) {
ids.splice(index, 1);
$(this).removeClass("changedBackground");
} else {
ids.push(item.id);
$(this).addClass("changedBackground");
}
$('#SectionId').attr('value', ids.join(','));
}
});
$(sectionId).append(button);
}
}
});

// Add parent sections with children below them
Object.keys(parentSections).forEach(function(parentId) {
const parent = parentSections[parentId];
// Create the parent section button
const parentButton = $('', {
text: parent.section_name,
'id': parentId,
'class': 'button-location-style parent-section',
click: function() {
var index = ids.indexOf(parentId);
if (index > -1) {
ids.splice(index, 1);
$(this).removeClass("changedBackground");
// Enable the child sections when the parent is unselected
parent.children.forEach(function(childId) {
$(`#${childId}`).removeClass('disabled');
});
} else {
ids.push(parentId);
$(this).addClass("changedBackground");
// Disable the child sections when the parent is selected
parent.children.forEach(function(childId) {
$(`#${childId}`).addClass('disabled');
});
}
// Update the section ID input field with the selected IDs
$('#SectionId').attr('value', ids.join(','));
}
});

$(sectionId).append(parentButton);

// Create a container for child sections under the parent button
const childContainer = $('', {
'class': 'child-container'
});

// Append child sections under the parent section
parent.children.forEach(function(childId) {
// Find the child section from the data
const childItem = data.find(function(item) {
return item.id == childId;
});

if (childItem) {

const childButton = $('', {
text: childItem.section_name,
id: childItem.id,
class: 'button-location-style child-section',
click: function () {
// check whether the child is in the selected array or not
var index = ids.indexOf(childItem.id);

if (index > -1) {
// if selected then unselect it
ids.splice(index, 1);
$(this).removeClass("changedBackground");
} else {
// otherwise select it
ids.push(childItem.id);
$(this).addClass("changedBackground");
}

// if ids array length > 0, disable the parent.
if (ids.length > 0) {
$(`#${parentId}`).addClass('disabled');
} else {
// otherwise, enable it.
$(`#${parentId}`).removeClass('disabled');
}

// Update the SectionId field
$('#SectionId').attr('value', ids.join(','));
}
});

// Append the child button to the container
childContainer.append(childButton);
}
});

$(sectionId).append(childContainer);  // Append child container under parent
});

if (data.length === 0) {
const button = $('', {
text: 'xxx',
'class': 'button-location-style disabled',
});
$(sectionId).append(button);
}
})
.fail(function() {
alert("Error loading data.");
});
} else {
alert("Please select a valid store ID.");
}
});

}

Проблема:

• Родительский раздел должен быть включен только в том случае, если все дочерние разделы
  не выбраны.< /li>
  Родитель ведет себя не так, как ожидалось. После выбора нескольких
  дочерних разделов и отмены выбора одного родительский элемент остается отключенным, хотя
  не следует выбирать все дочерние разделы.

Что Я пробовал:

• Я проверял массив идентификаторов, когда дочерний элемент выбран или не выбран,
  но родительский элемент все еще не включен, когда все дочерние элементы не выбраны.

Как я могу изменить мой код так, чтобы родительский раздел включался только тогда, когда все дочерние разделы не выбраны, и оставался отключенным, когда выбран любой дочерний раздел?

Подробнее здесь: https://stackoverflow.com/questions/793 ... -selection