如何让一个复选框像父div中的收音机一样

Question

在我的代码中想要从每个.form-group.row选择一个复选框 - 就像一个单选按钮。 每个form-group可以多次出席，每个复选框的名称相同。 这就是我在特定（父）表格组中尝试选择的原因。

我知道单选按钮是为这样的东西设计的，但我使用动态表单。 我尝试了很多东西，但似乎都没有用？

有人可以帮帮我吗？ 非常感谢你提前！

 $('.form-group input').on('change', function() { if ($(this).is(':checked')) { $(this).siblings('input').prop('checked', false); } else $('.form-group input').prop('checked', false); }); 

 /* So, every "Reinigen" card has his own "Rookgasafvoer" with it's own 3 checkboxes. */ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="<? echo MAP_URL; ?>css/jquery-ui.min.css" /> <!-- Start Card Reinigen --> <div class="card card-red"> <div class="card-header"> <strong>Reinigen</strong> </div> <div class="card-body"> <div class="row"> <div class="col-sm-4"> </div> <div class="col-sm-1 text-center"> <label style="font-size: 10px; font-weight: bold;">Goed</label> </div> <div class="col-sm-1 text-center"> <label style="font-size: 10px; font-weight: bold;">NVT</label> </div> <div class="col-sm-1 text-center"> <label style="font-size: 10px; font-weight: bold;">Niet goed</label> </div> <div class="col-sm-5"> <label style="font-size: 10px; font-weight: bold;">Opmerkingen:</label> </div> </div> <div class="form-group row"> <label for="verwarming_rookgas" class="col-sm-4 col-form-label">Rookgasafvoer:</label> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="nvt" checked> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="niet-goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-5"> <input type="text" class="form-control form-control-lg" name="verwarming_rookgas_opmerkingen[]"> </div> </div> <div class="form-group row"> <label for="verwarming_warmtewisselaar" class="col-sm-4 col-form-label">Warmtewisselaar:</label> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="nvt" checked> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="niet-goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-5"> <input type="text" class="form-control form-control-lg" name="verwarming_warmtewisselaar_opmerkingen[]"> </div> </div> <div class="form-group row"> <label for="verwarming_condensafvoer" class="col-sm-4 col-form-label">Condens afvoer:</label> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="nvt" checked> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="niet-goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-5"> <input type="text" class="form-control form-control-lg" name="verwarming_condensafvoer_opmerkingen[]"> </div> </div> </div> </div> <!-- End Card Reinigen --> <!-- Start Card Reinigen --> <div class="card card-red"> <div class="card-header"> <strong>Reinigen</strong> </div> <div class="card-body"> <div class="row"> <div class="col-sm-4"> </div> <div class="col-sm-1 text-center"> <label style="font-size: 10px; font-weight: bold;">Goed</label> </div> <div class="col-sm-1 text-center"> <label style="font-size: 10px; font-weight: bold;">NVT</label> </div> <div class="col-sm-1 text-center"> <label style="font-size: 10px; font-weight: bold;">Niet goed</label> </div> <div class="col-sm-5"> <label style="font-size: 10px; font-weight: bold;">Opmerkingen:</label> </div> </div> <div class="form-group row"> <label for="verwarming_rookgas" class="col-sm-4 col-form-label">Rookgasafvoer:</label> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="nvt" checked> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="niet-goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-5"> <input type="text" class="form-control form-control-lg" name="verwarming_rookgas_opmerkingen[]"> </div> </div> <div class="form-group row"> <label for="verwarming_warmtewisselaar" class="col-sm-4 col-form-label">Warmtewisselaar:</label> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="nvt" checked> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="niet-goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-5"> <input type="text" class="form-control form-control-lg" name="verwarming_warmtewisselaar_opmerkingen[]"> </div> </div> <div class="form-group row"> <label for="verwarming_condensafvoer" class="col-sm-4 col-form-label">Condens afvoer:</label> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="nvt" checked> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="niet-goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-5"> <input type="text" class="form-control form-control-lg" name="verwarming_condensafvoer_opmerkingen[]"> </div> </div> </div> </div> <!-- End Card Reinigen --> 

Answer 1

尝试使用以下代码：

$('.form-group input').on('change', function() {
  if ($(this).is(':checked')) {
    $(this).closest(".row").find('input:checkbox').prop('checked', false);
    $(this).prop('checked', true)
  } else
    $(this).prop('checked', false);
});

当您单击未选中复选框时，它将取消选中已经检查的复选框，然后选中您单击的复选框。

演示

 $('.form-group input').on('change', function() { if (!$(this).is(':checked')) { $(this).prop('checked', true) } else { $(this).closest(".row").find('input:checkbox').prop('checked', false); $(this).prop('checked', true) } }); 

 /* So, every "Reinigen" card has his own "Rookgasafvoer" with it's own 3 checkboxes. */ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="<? echo MAP_URL; ?>css/jquery-ui.min.css" /> <!-- Start Card Reinigen --> <div class="card card-red"> <div class="card-header"> <strong>Reinigen</strong> </div> <div class="card-body"> <div class="row"> <div class="col-sm-4"> </div> <div class="col-sm-1 text-center"> <label style="font-size: 10px; font-weight: bold;">Goed</label> </div> <div class="col-sm-1 text-center"> <label style="font-size: 10px; font-weight: bold;">NVT</label> </div> <div class="col-sm-1 text-center"> <label style="font-size: 10px; font-weight: bold;">Niet goed</label> </div> <div class="col-sm-5"> <label style="font-size: 10px; font-weight: bold;">Opmerkingen:</label> </div> </div> <div class="form-group row"> <label for="verwarming_rookgas" class="col-sm-4 col-form-label">Rookgasafvoer:</label> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="nvt" checked> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="niet-goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-5"> <input type="text" class="form-control form-control-lg" name="verwarming_rookgas_opmerkingen[]"> </div> </div> <div class="form-group row"> <label for="verwarming_warmtewisselaar" class="col-sm-4 col-form-label">Warmtewisselaar:</label> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="nvt" checked> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="niet-goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-5"> <input type="text" class="form-control form-control-lg" name="verwarming_warmtewisselaar_opmerkingen[]"> </div> </div> <div class="form-group row"> <label for="verwarming_condensafvoer" class="col-sm-4 col-form-label">Condens afvoer:</label> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="nvt" checked> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="niet-goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-5"> <input type="text" class="form-control form-control-lg" name="verwarming_condensafvoer_opmerkingen[]"> </div> </div> </div> </div> <!-- End Card Reinigen --> <!-- Start Card Reinigen --> <div class="card card-red"> <div class="card-header"> <strong>Reinigen</strong> </div> <div class="card-body"> <div class="row"> <div class="col-sm-4"> </div> <div class="col-sm-1 text-center"> <label style="font-size: 10px; font-weight: bold;">Goed</label> </div> <div class="col-sm-1 text-center"> <label style="font-size: 10px; font-weight: bold;">NVT</label> </div> <div class="col-sm-1 text-center"> <label style="font-size: 10px; font-weight: bold;">Niet goed</label> </div> <div class="col-sm-5"> <label style="font-size: 10px; font-weight: bold;">Opmerkingen:</label> </div> </div> <div class="form-group row"> <label for="verwarming_rookgas" class="col-sm-4 col-form-label">Rookgasafvoer:</label> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="nvt" checked> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="niet-goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-5"> <input type="text" class="form-control form-control-lg" name="verwarming_rookgas_opmerkingen[]"> </div> </div> <div class="form-group row"> <label for="verwarming_warmtewisselaar" class="col-sm-4 col-form-label">Warmtewisselaar:</label> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="nvt" checked> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="niet-goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-5"> <input type="text" class="form-control form-control-lg" name="verwarming_warmtewisselaar_opmerkingen[]"> </div> </div> <div class="form-group row"> <label for="verwarming_condensafvoer" class="col-sm-4 col-form-label">Condens afvoer:</label> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="nvt" checked> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="niet-goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-5"> <input type="text" class="form-control form-control-lg" name="verwarming_condensafvoer_opmerkingen[]"> </div> </div> </div> </div> <!-- End Card Reinigen --> 

Answer 2

您正在尝试选择作为输入元素的已更改复选框的任何直接同级。 但没有。 你必须得到最近的div的兄弟姐妹，并找到它们内的所有复选框：

 $('.form-group input').on('change', function() { if ($(this).is(':checked')) { $(this).closest('div').siblings().find(':checkbox').prop('checked', false); } else $('.form-group input').prop('checked', false); }); 

 /* So, every "Reinigen" card has his own "Rookgasafvoer" with it's own 3 checkboxes. */ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="<? echo MAP_URL; ?>css/jquery-ui.min.css" /> <!-- Start Card Reinigen --> <div class="card card-red"> <div class="card-header"> <strong>Reinigen</strong> </div> <div class="card-body"> <div class="row"> <div class="col-sm-4"> </div> <div class="col-sm-1 text-center"> <label style="font-size: 10px; font-weight: bold;">Goed</label> </div> <div class="col-sm-1 text-center"> <label style="font-size: 10px; font-weight: bold;">NVT</label> </div> <div class="col-sm-1 text-center"> <label style="font-size: 10px; font-weight: bold;">Niet goed</label> </div> <div class="col-sm-5"> <label style="font-size: 10px; font-weight: bold;">Opmerkingen:</label> </div> </div> <div class="form-group row"> <label for="verwarming_rookgas" class="col-sm-4 col-form-label">Rookgasafvoer:</label> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="nvt" checked> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="niet-goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-5"> <input type="text" class="form-control form-control-lg" name="verwarming_rookgas_opmerkingen[]"> </div> </div> <div class="form-group row"> <label for="verwarming_warmtewisselaar" class="col-sm-4 col-form-label">Warmtewisselaar:</label> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="nvt" checked> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="niet-goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-5"> <input type="text" class="form-control form-control-lg" name="verwarming_warmtewisselaar_opmerkingen[]"> </div> </div> <div class="form-group row"> <label for="verwarming_condensafvoer" class="col-sm-4 col-form-label">Condens afvoer:</label> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="nvt" checked> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="niet-goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-5"> <input type="text" class="form-control form-control-lg" name="verwarming_condensafvoer_opmerkingen[]"> </div> </div> </div> </div> <!-- End Card Reinigen --> <!-- Start Card Reinigen --> <div class="card card-red"> <div class="card-header"> <strong>Reinigen</strong> </div> <div class="card-body"> <div class="row"> <div class="col-sm-4"> </div> <div class="col-sm-1 text-center"> <label style="font-size: 10px; font-weight: bold;">Goed</label> </div> <div class="col-sm-1 text-center"> <label style="font-size: 10px; font-weight: bold;">NVT</label> </div> <div class="col-sm-1 text-center"> <label style="font-size: 10px; font-weight: bold;">Niet goed</label> </div> <div class="col-sm-5"> <label style="font-size: 10px; font-weight: bold;">Opmerkingen:</label> </div> </div> <div class="form-group row"> <label for="verwarming_rookgas" class="col-sm-4 col-form-label">Rookgasafvoer:</label> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="nvt" checked> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_rookgas_status[]" type="checkbox" class="custom-control-input" value="niet-goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-5"> <input type="text" class="form-control form-control-lg" name="verwarming_rookgas_opmerkingen[]"> </div> </div> <div class="form-group row"> <label for="verwarming_warmtewisselaar" class="col-sm-4 col-form-label">Warmtewisselaar:</label> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="nvt" checked> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_warmtewisselaar_status[]" type="checkbox" class="custom-control-input" value="niet-goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-5"> <input type="text" class="form-control form-control-lg" name="verwarming_warmtewisselaar_opmerkingen[]"> </div> </div> <div class="form-group row"> <label for="verwarming_condensafvoer" class="col-sm-4 col-form-label">Condens afvoer:</label> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="nvt" checked> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-1 text-center"> <label class="custom-control custom-checkbox" style="margin-right: 0;padding-left: 1rem;"> <input name="verwarming_condensafvoer_status[]" type="checkbox" class="custom-control-input" value="niet-goed"> <span class="custom-control-indicator"></span> </label> </div> <div class="col-sm-5"> <input type="text" class="form-control form-control-lg" name="verwarming_condensafvoer_opmerkingen[]"> </div> </div> </div> </div> <!-- End Card Reinigen --> 

Answer 3

$('.form-group input').on('change', function() {
  if ($(this).is(':checked')) {
    $(this).closest(".row").find('input:checkbox').prop('checked', false);
    $(this).prop('checked', true)
  } else
    $(this).prop('checked', false);
});

感谢@ CarstenLøvboAndersen