Only select one checkbox at a time

Question

I have this list type menu created using the bootstrap list group. I would like to make only one Main category active at a time. So while "Main Category One" is selected, now if I click the other category "Main category one" will be unselected and "Main category Two" will be activated.

I tried some solutions before asking here but haven't figured it out yet. The list has around 15 Main categories and I just put here the code for only two because the code will be longer otherwise. Hope someone can help. Thanks.

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

Here is a quick example on how this can be done. I would advise making it more specific on your lookup for checked checkboxes in the parent container. I just did a global lookup for this example.

 $('.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>