我有使用引导列表组创建的此列表类型菜单。我想一次只激活一个主要类别。因此,尽管“主类别一”被选中,如果我现在点击其他类别“主要类别一”将成为选择,而“主要类别二”将被激活。
在问这里之前,我尝试了一些解决方案,但还没有弄清楚。该列表大约有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>
答案 0 :(得分: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>