<div id="checkboxes">
    <label><input type="checkbox" name="box1" value="orange" class="btn"> Oranges</label>
    <label><input type="checkbox" name="box2" value="apple" class="btn"> Apples</label>
</div>
<script type="text/javascript">
jQuery(function()
{
    jQuery(document).on("change", ".btn", function()
    {
        jQuery(".btn").prop("checked", false);

        if (! this.checked)
            jQuery(this).prop("checked", true);
    });
});
</script>

Działa świetnie, aby dokonać pola wyboru zachowują się jak przyciski radiowe, ale "odznaczenie" nie działa. Jak pozwolić użytkownikom być w stanie również odznaczyć?

1
Rehan Adil 22 listopad 2020, 13:47

1 odpowiedź

Najlepsza odpowiedź

Domyślnie dostajesz to zachowanie. Wszyscy JS musi zrobić w tym przypadku, aby odznaczyć każdy element .btn, z wyjątkiem tego, który podniósł wydarzenie:

jQuery($ => {
  $(document).on("change", ".btn", function() {
    $(".btn").not(this).prop("checked", false);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="checkboxes">
  <label><input type="checkbox" name="box1" value="orange" class="btn"> Oranges</label>
  <label><input type="checkbox" name="box2" value="apple" class="btn"> Apples</label>
</div>
2
Rory McCrossan 22 listopad 2020, 10:51