Как заставить мой тумблер работать?

Question

У меня есть следующий код: jQuery + Bootstrap

https://jsfiddle.net/a27rffb2/4/

Элемент jQuery:

$(document).ready(function() {

  $('input:checkbox').change(function() {
    if ($("#toggle1").is(":checked")) {
      $("#collapseOneC1").collapse('show');
      $("#collapseTwoC1").collapse('show');
      $("#collapseThreeC1").collapse('show');
    } else {
      $("#collapseOneC1").collapse('hide');
      $("#collapseTwoC1").collapse('hide');
      $("#collapseThreeC1").collapse('hide');
    }
  });
  //Toggle on Element Collapse
  $("#collapseOneC1, #collapseTwoC1, #collapseThreeC1").on('shown.bs.collapse', function() {
    $('#toggle1').prop("checked", true);
  });
  $("#collapseOneC1, #collapseTwoC1, #collapseThreeC1").on('hidden.bs.collapse', function() {
    $('#toggle1').prop("checked", false);
  });
});

Постановка проблемы: Тумблер следует проверять только в том случае, если отображаются все панели параметров (когда вы щелкаете панель параметров, чтобы открываться по отдельности). Как этого можно добиться путем редактирования вышеуказанного кода?

Спасибо за обзор!

Answer 1

Вам нужно добавить условие, чтобы проверить, отображаются ли все опции, что означает, что вам нужно проверить, все ли они имеют класс .show, используя функцию JQuery. .hasClass()

if ($('#collapseOneC1').hasClass('show') && $('#collapseTwoC1').hasClass('show') && $('#collapseThreeC1').hasClass('show')) {
  $('#toggle1').prop("checked", true);
}

Смотрите обновленную скрипку

Answer 2

Пожалуйста, проверьте обновленный код: https://jsfiddle.net/KlaussU/a27rffb2/6/

    if(areAllOptionsExpanded()) {
           $('#toggle1').prop("checked", true);
    }
function areAllOptionsExpanded() {
    return $(".card-header.collapsed").length == 0;
}

Я думаю, что это лучшее решение, так как вам не придется вручную добавлять $('#collapseOneCX'). HasClass('show') для каждой опции, которую вы, возможно, захотите добавить в будущем (или удалить). Даже если вы думаете, что вам не нужно этого делать, вы все равно не можете быть на 100% уверены, поэтому лучше написать более общее решение, которое не потребовало бы от вас каких-либо изменений в будущем.