Блог

Я уже получал помощь с двумя сценариями, и я действительно благодарен за это! Я надеюсь, что кто-нибудь сможет прийти на помощь еще раз.

Один скрипт позволяет мне показывать / скрывать дочерние элементы UL и снимать флажок с других родителей.

Второй сценарий был для кнопки флажка, когда метки не было.

Оба были решениями jquery. Проблема на данный момент заключается в том, что два сценария конфликтуют. Я создал codepen, чтобы показать проблему.

Важно отметить, я не могу изменить HTML напрямую, но у меня есть возможность использовать jquery на странице.

Итак, в настоящее время флажки сняты, вы можете показывать и скрывать дочерние элементы, выбрав родительскую категорию. Но второй скрипт, устанавливающий флажки, похоже, что-то переопределяет. С помощью первого скрипта показывать и скрывать. Это предназначено для отмены выбора всех дочерних элементов, если вы нажмете родительскую категорию или любую другую родительскую категорию.

Если вы отключите скрипт для кнопки флажка без метки, то функция показать скрыть будет работать так, как задумано. Но тогда я снова остаюсь с флажками.

Вот ссылка на codepen:

https://codepen.io/mjthehunter/pen/YgaOxr

 <!-- Hide/Unhide Categories -->
$('.fes-category-checklist > li > label.selectit > input[name^="download_category"]').change(function() {
  var categoryId = this.value;
  var $checkbox = $(this);

  $('.fes-category-checklist')
    .find('li[id^="download_category"]')
    .attr('data-open', function(index, value) {
      return this.id.endsWith(categoryId) amp;amp; value === 'false';
    });

  $checkbox
    .closest('ul')
    .find('input[name^="download_category"]')
    .not(this)
    .prop('checked', false);
});


$(document).ready(function() {
  $('ul.fes-category-checklist')
    .find('> li[id^="download_category"]')
    .attr('data-open', false)
    .fadeIn();
});


<!-- checkbox button with no label -->
$(document).ready(function(){
  $('.fes-category-checklist, .fes-category-checklist .children').addClass('nolist');

  $('.selectit').addClass('checkbutton');

  $('.checkbutton').click(function(){
    if( $(this).children('input:checkbox').is(':checked') ) {
         $(this).addClass('ischecked');
    } else {
      $(this).removeClass('ischecked');
    }
  });  

});
  

Я действительно надеюсь, что кто-нибудь сможет помочь.
Спасибо!

Morten

В вашем событии изменения для ваших флажков вы устанавливаете, чтобы все остальные флажки не проверялись с помощью этого кода:

 $checkbox
.closest('ul')
.find('input[name^="download_category"]')
.not(this)
.prop('checked', false);
  

Но вы не удаляете ischecked класс, который добавлен с помощью вашего скрипта «кнопка флажка без метки». Вам также придется удалить это …. вот так:

 $checkbox
.closest('ul')
.find('input[name^="download_category"]')
.not(this)
.prop('checked', false)
.parent().removeClass('ischecked'); // <-- add this to remove isSelected class
  

Вот обновленный codepen