Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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 ?

share|improve this question
This may be an obvious question here, but if you want a checkbox to behave like a radio button, why not just use a radio button? – Rory McCrossan Jan 15 at 14:26
Because that behaviour depends on what is checked elsewhere : in some contexts, user may be able to check several checkboxes. – Ninsuo Jan 15 at 14:30
you could use a timeout and ignore an event that is fired e.g. twice in 100ms, but that would be really dirty ;) – 23tux Jan 15 at 14:33
Not a bad idea. A timeout with 0 milisecs made the job. :-) – Ninsuo Jan 15 at 14:42
@Ninsuo so should you be able to deselect a checkbox? – wirey Jan 15 at 14:48

3 Answers

up vote 2 down vote accepted

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);
    });
});
share|improve this answer
Yes, solve the problem without complexity. – Ninsuo Jan 15 at 14:47
up vote 1 down vote

You can do it like this if you still want to be able to unselect a checkbox

$('input[type=checkbox]').change(function(){ // <-- use the change event
  var group = $(this).attr('name'); // get the group
  $('input[name='+group+']').not(this).prop('checked',false);  // set others to unchecked
});

http://jsfiddle.net/rmJpB/

share|improve this answer
up vote 0 down vote

You can use on() function.

$('body').on('click', '.myradio', function(){
  $('.myradio[name="'+$(this).attr('name')+'"]').prop('checked', false);
  $(this).prop('checked', true);
});

Uncheck all the other checkboxes with the same name, check the current checkbox.

http://jsbin.com/ofibow/2/edit

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.