如何讓一個復選框像父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