jQuery - checkboxes like radiobuttons

Question

I have group checkboxes and I like if this group have behaviour like radiobuttons with same name atribute.

Each checkbox has different name.

Only one can be chosen from checkboxes.

How I can do this?

---

Solution

Why I need this? Because we need consistency webUI. Please, this is not question about our application architecture. :)

HTML Sample

<div class="multiCheckBox">
 <span class="multiGroup">
  <div><input class="multiItem" value="111" name="list" type="checkbox" />111</div>
  <div><input class="multiItem" value="112" name="list" type="checkbox" />112</div>
  <div><input class="multiItem" value="113" name="list" type="checkbox" />113</div>
 </span>
 <span>
  <div><input class="multiItem" value="121" name="list" type="checkbox" />121</div>
  <div><input class="multiItem" value="122" name="list" type="checkbox" />122</div>
  <div><input class="multiItem" value="133" name="list" type="checkbox" />123</div>
 </span>
 <span>
  <div><input class="multiItem" value="131" name="list" type="checkbox" />131</div>
  <div><input class="multiItem" value="132" name="list" type="checkbox" />132</div>
  <div><input class="multiItem" value="133" name="list" type="checkbox" />133</div>
 </span>
</div>

JavaScript

var $groups = $("span.multiGroup", $that);
$groups.each(function() {
    var $group = $(this);
    var $checkboxes = $(":checkbox", $group);
    $checkboxes.click(function() {
        var $activeCheckbox = $(this);
        var state = $activeCheckbox.attr('checked');
        $checkboxes.attr('checked', false);
        $activeCheckbox.attr('checked', state);
    });
});

Answer 1

Here's a hint: Use radio buttons. ;)

I wouldn't recommend doing this because it would be considered bad for usability and would certainly violate the principle of least surprise. Users have been conditioned to expect radios to accept 1 check and checkboxes to accept many. Don't make your users think.

If you have your reasons, though, here's how to go about doing this with jQuery:

<input type='checkbox' name='mygroup1' value='1' class='unique'>
<input type='checkbox' name='mygroup2' value='2' class='unique'>
<input type='checkbox' name='mygroup3' value='3' class='unique'>

And the jQuery:

var $unique = $('input.unique');
$unique.click(function() {
    $unique.filter(':checked').not(this).removeAttr('checked');
});

And here's a live sample.

EDIT:

As pointed out in the comments, this would allow the user to deselect all checkboxes even if they chose one initially, which isn't exactly like radio buttons. If you want this, then the jQuery would look like this:

var $unique = $('input.unique');
$unique.click(function() {
    $unique.removeAttr('checked');
    $(this).attr('checked', true);
});

Answer 2

Why don't you use radio buttons, then?

The difference is there for a reason. It has been designed this way, and from a user perspective radio buttons mean "select one", and checkboxes mean "select many".

Don't break user's expectations by changing this well-tried paradigm. It's a bad thing when application developers prefer "looks" over usability and convention, so don't be one of them.

User interfaces work because the metaphors used (checkboxes, buttons, the shape of the mouse pointer, colors, etc.) are and behave a certain way. Users will have problems with your app and may not even know why when you do things like this.

This is an anti-pattern that falls into the same category as changing the label with the checkbox state:

[ ] enable option        vs.      [ ] option
[x] disable option                [x] option

Answer 3

I had a similar problem. I couldn't use radio button because the same form had to display multiple choice checkboxes in some situations. I took your markup and wrote this small piece of jQuery:

$("span.multiGroup input").click(function() {
    $("span.multiGroup input").attr('checked', false);
    $(this).attr('checked', true);
});