JQuery 每个复选框行只检查一个复选框

Question

我的页面上有多个复选框行，使用此模板：

<div class="row">
  <div class="col">
    <input type="checkbox" id="ft_checkbox" name="ft_checkbox" value="CSV" checked>
    <label for="ft_checkbox">CSV</label>
    &nbsp;
    <input type="checkbox" id="ft_checkbox" name="ft_checkbox" value="JSON" >
    <label for="ft_checkbox">JSON</label>
    &nbsp;
    <input type="checkbox" id="ft_checkbox" name="ft_checkbox" value="PDF" >
    <label for="ft_checkbox">PDF</label>
    &nbsp;
    <input type="checkbox" id="ft_checkbox" name="ft_checkbox" value="XLSX" >
    <label for="ft_checkbox">XLSX</label>
  </div>
</div>

只允许选中一个复选框，我这样做：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  
  $(document).ready(function(){
    $('input:checkbox').click(function() {
      $('input:checkbox').not(this).prop('checked', false);
    });
  });
  
</script>

但是，这会使所有行相互依赖。如果我在第一行选中一个框，它将取消选中整个文档中的所有框。我想将此功能应用于每一行/父 div。所以我允许每行检查一个弓。

Answer 1

请使用此代码 sn-p。

$(document).ready(function(){
    $('input:checkbox').click(function() {
        $(this).parent().find('input:checkbox').not(this).prop('checked', false);
    });
  });