Question

I have a list of checkboxes which are grouped by a priority number and I want a way that a user can select multiple ones from different priority groups but only one from each

<input type='checkbox' value='1' name='priority[]'  />first choice in priority 1 group<br>
<input type='checkbox' value='2' name='priority[]'  /> second choice in priority 1 group <br>
<input type='checkbox' value='3' name='priority[]'  /> third choice in priority 1 group <br>
<input type='checkbox' value='4' name='priority[]'  /> first choice in priority 2 group <br>
<input type='checkbox' value='5' name='priority[]'  /> second choice in priority 2 group <br>
<input type='checkbox' value='6' name='priority[]'  /> third choice in priority 2 group <br>

So in the example above it would fine for a user to select 1 and 5 as they are in different priority groups, but not 1 and 2 as they are in the same priority group

So I’ve been thinking of using javascript to disable the other checkboxes in the group when one is checked, so for example if I select 1, then 2 and 3 would be disabled but not 4, 5 or 6

I’ve been looking to see if there is anything in jQuery’s library but can’t see anything, I was wondering if I could group the checkboxes together using id or tabindex and then do a disable that way but no luck so far
The checkboxes are dynamically generated from a database table so I can play around with sorting them or adding divs around them if needed
Can anyone help?

Cheers

Mike

Answer 1

1. What about this:

$('.check').change(function() {
    var group = $(this).data('priority');
    $('.check[data-priority="' + group + '"]').not(this).prop('disabled', this.checked);
})​;

Demo http://jsfiddle.net/dfsq/Qvhxp/1/

2.
You would better use radio buttons instead of checkboxes (apply -webkit-appearance, -moz-appearance, if needed).