如何让一个复选框像父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;">N.V.T</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;">N.V.T</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);
});

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

<强>演示

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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;">N.V.T</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;">N.V.T</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 -->

＆＃13;

＆＃13;

＆＃13;

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;">N.V.T</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;">N.V.T</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);
});

感谢@ Carsten Løvbo Andersen