Checkbox on change event is not working on Safari

Question

Thanks in advance for the help on this. I have a special requirement on my page where I needed a checkbox to "act" like a radio button, so only one can be checked at a time. To achieve that I used this snippet below"

<script>
$('input:checkbox').on('change', function() {
  $('input:checked').not($(this)).closest('.w-checkbox').click();
});
</script>

It works perfectly on Chrome. However, it doesn't work on Safari and allows more than one checkbox to be clicked. I was wondering if anyone had ideas on how to solve this because I have tried many alternatives and unfortunately need to have the checkbox

Answer 1

The proper way to uncheck a checkbox is by changing the checked property.

 $('input:checkbox.w-checkbox').change(function() { $('input:checkbox.w-checkbox').not(this).prop('checked', false); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" class="w-checkbox" /> <input type="checkbox" class="w-checkbox" /> <input type="checkbox" class="w-checkbox" />