Question

I would like to simulate radio button behaviour using checkboxes, this says :

When a checkbox is checked, all other checkboxes with the same name (here, selector) are unchecked

But, if I try to do something like :

$('body').delegate('.myradio', 'click', function(e) {
    $('.myradio').prop('checked', false);
    $(this).prop('checked', true);
});

This trigger the change event twice.

If I try to add a e.preventDefault :

$('body').delegate('.myradio', 'click', function(e) {
    $('.myradio').prop('checked', false);
    $(this).prop('checked', true);
    e.preventDefault();
});

No event are triggered at all and the checkbox isn’t checked.

Finally, if I try to trigger the event myself :

$('body').delegate('.myradio', 'click', function(e) {
    $('.myradio').prop('checked', false);
    $(this).prop('checked', true);
    e.preventDefault();
    $(this).change();
});

The change event is also called twice.

For information, all my checkbox have unique IDs.

What is the propper way to disable all checkboxes except the one checked ?

Answer 1

If I understand your question correctly, following should work.

$('body').delegate('.myradio', 'click', function (e) {
    var $element = $(this)[0];
    $('.myradio').each(function () {
        if ($(this)[0] !== $element)
            $(this).prop('checked', false);
    });
});

This way the checkbox group behaves like a radio button group. Except that you can de-select a selected item.

---

Below code makes the group behave more like a radio group. You can’t de-select once you made a selection.

$('body').delegate('.myradio', 'click', function (e) {
    var $element = $(this)[0];

    if ($(this).prop('checked') == false) {
        $(this).prop('checked', true);
        return;
    }

    $('.myradio').each(function () {
        if ($(this)[0] !== $element)
            $(this).prop('checked', false);
    });
});