一次只有一個復選框 select

Question

我使用引導列表組創建了這個列表類型菜單。 我想一次只激活一個主要類別。 因此，盡管選擇了“主要類別一”，但現在，如果我單擊另一個類別“主類別一類”，則將被選中，並且將激活“主要類別”。

在問這里之前我嘗試了一些解決方案，但還沒有弄清楚。 該列表有大約 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

這是一個關於如何做到這一點的快速示例。 我建議您在查找父容器中的選中復選框時更加具體。 我剛剛為這個例子做了一個全局查找。

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