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

Question

In my code want to select just 1 checkbox from each .form-group.row - like a radio button. Each form-group can attend several times with each checkbox the same name. That's why I am trying a select within the specific (parent) form-group.

I know radio buttons are designed for such a thing but I work with dynamic forms. I've tried a lot of things, but none seems to work?

Can somebody help me please? Thank you so very much in advance!

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

Try using the following code:

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

When you click on a none checked checkbox it will uncheck the one that is already check and then check the one you clicked on.

Demo

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

You are trying to select any direct siblings of the changed checkbox that are input elements. But there are none. You have to get the siblings of the closest div and find all checkboxes inside them:

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

Thanks to @ Carsten Løvbo Andersen