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>
<input type="checkbox" id="ft_checkbox" name="ft_checkbox" value="JSON" >
<label for="ft_checkbox">JSON</label>
<input type="checkbox" id="ft_checkbox" name="ft_checkbox" value="PDF" >
<label for="ft_checkbox">PDF</label>
<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