Alors comment puis-je autoriser un utilisateur à ne sélectionner qu'une seule case à cocher ?
Je sais que les boutons radio sont "idéaux", mais pour mon objectif... ce n'est pas le cas.
J'ai un champ dans lequel les utilisateurs doivent sélectionner l'une ou l'autre des deux options, mais pas les deux. Le problème est que j'ai besoin que mes utilisateurs puissent également désélectionner leur option, et c'est là que les boutons radio échouent car une fois que vous avez sélectionné le groupe, vous devez choisir une option.
Je vais valider l'information via php, mais j'aimerais quand même limiter les utilisateurs à une seule réponse s'ils veulent la donner.
Cet extrait le fera :
// the selector will match all input controls of type :checkbox
// and attach a click event handler
$("input:checkbox").on('click', function() {
// in the handler, 'this' refers to the box clicked on
var $box = $(this);
if ($box.is(":checked")) {
// the name of the box is retrieved using the .attr() method
// as it is assumed and expected to be immutable
var group = "input:checkbox[name='" + $box.attr("name") + "']";
// the checked state of the group/box on the other hand will change
// and the current value is retrieved using .prop() method
$(group).prop("checked", false);
$box.prop("checked", true);
} else {
$box.prop("checked", false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<h3>Fruits</h3>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />Kiwi</label>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />Jackfruit</label>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />Mango</label>
</div>
<div>
<h3>Animals</h3>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />Tiger</label>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />Sloth</label>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />Cheetah</label>
</div>
$("#myform input:checkbox").change(function() {
$("#myform input:checkbox").attr("checked", false);
$(this).attr("checked", true);
});
Cela devrait fonctionner pour n'importe quel nombre de cases à cocher dans le formulaire. Si vous en avez d'autres qui ne font pas partie du groupe, configurez les sélecteurs des entrées applicables.