Только установите один флажок за раз

Question

У меня есть это меню типа списка, созданное с использованием группы списков bootstrap. Я бы хотел сделать активным только одну главную категорию за раз. Таким образом, пока выбрана «Основная категория первая», теперь, если я нажму на другую категорию, «Основная категория первая» не будет выбрана, а «Основная категория два» будет активирована.

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

HTML

<a class="list-group-item list-sub-group-item list-group-item-action">
    <div class="custom-control custom-checkbox">
        <input type="checkbox" value='mcat1' id="mcat1" class="custom-control-input">
        <label class="custom-control-label" for="mcat1">Main Category One</label>
    </div>
</a>

<div class="list-group-submenu">
    <a class="list-group-item list-group-item-action pl-5">
        <div class="custom-control custom-checkbox">
            <input type="checkbox" value='item1' id="item1" class="custom-control-input">
            <label class="custom-control-label" for="item1">Item</label>
        </div>
    </a>
</div>

<a class="list-group-item list-sub-group-item list-group-item-action">
    <div class="custom-control custom-checkbox">
        <input type="checkbox" value='mcat2' id="mcat2" class="custom-control-input">
        <label class="custom-control-label" for="mcat2">Main Category Two</label>
    </div>
</a>

<div class="list-group-submenu">
    <a class="list-group-item list-group-item-action pl-5">
        <div class="custom-control custom-checkbox">
            <input type="checkbox" value='item1' id="item1" class="custom-control-input">
            <label class="custom-control-label" for="item1">Item</label>
        </div>
    </a>
</div>

Answer 1

Вот краткий пример того, как это можно сделать. Я бы посоветовал сделать его более конкретным c при поиске отмеченных флажков в родительском контейнере. Я только что сделал глобальный поиск для этого примера.

$('.custom-control-input:checkbox').on('change', function(e){
    $('.list-group .custom-control-input').prop('checked', false);
    $(this).prop('checked', true);
})

<link href="https://getbootstrap.com/docs/4.4/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-group">
  <li class="list-group-item">
    <a>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck1">
        <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
      </div>
    </a>
    <ul class="list-group">
      <li class="list-group-item">
        <a>
          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="customCheck2">
            <label class="custom-control-label" for="customCheck2">Check this custom checkbox</label>
          </div>
        </a>
      </li>

    </ul>
  </li>
  <li class="list-group-item">
    <a>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck3">
        <label class="custom-control-label" for="customCheck3">Check this custom checkbox</label>
      </div>
    </a>
    <ul class="list-group">
      <li class="list-group-item">
        <a>
          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="customCheck4">
            <label class="custom-control-label" for="customCheck4">Check this custom checkbox</label>
          </div>
        </a>
      </li>

    </ul>
  </li>
  
</ul>