dimanche 27 décembre 2020

JQuery check only one checkbox per checkbox line

I have multiple checkbox lines on my page, with this template:

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

To allow only one checkbox to be checked I do:

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

However this makes all lines dependent from each other. If I check one box on line one, it will uncheck all boxes accross the whole document. I would like to apply this function for each line / parent div instead. So I allow one bow to be checked per line.




Aucun commentaire:

Enregistrer un commentaire