Horizontally and vertically exclusive radio button

Question

Hi folks

Been using this site for ages and have never had to go as far as to ask my own question... cheers in advance.

I have a group of "questions" which are to be listed. The user then has to rank these questions as 1st, 2nd, and 3rd (there can be many more than three questions however).

The problem I have is that, if I make the radio button mutually exclusive in one direction - the user could rank all questions as #2, however if I make them mutually exclusive in the other direction, a user could rank the same question as #1, #2, AND #3.

Is there a way (maybe using jquery/Jscript) to make the radio buttons mutually exclusive in both directions?

EXAMPLE:

<table>
<tr>
    <th>Question</th><th>Rank #1</th><th>Rank #2</th><th>Rank #3</th>
</tr><tr>
    <td>QUESTION 1</td>
    <td><input type="radio" name="rank1" value="1" id="1_1" /></td>
    <td><input type="radio" name="rank2" value="1" id="1_2" /></td>
    <td><input type="radio" name="rank3" value="1" id="1_3" /></td>
</tr><tr>
    <td>QUESTION 2</td>
    <td><input type="radio" name="rank1" value="3" id="3_1" /></td>
    <td><input type="radio" name="rank2" value="3" id="3_2" /></td>
    <td><input type="radio" name="rank3" value="3" id="3_3" /></td>
</tr>

In the above example, the value is the question's ID (from the DB)

Answer 1

Creative solution:

Why don't you use a widget? you could put questions like layers you can drag and move, example:

http://jqueryui.com/demos/sortable/

http://jqueryui.com/demos/draggable/#sortable

The first to appear would be the first one.

Answer 2

You would have to use jQuery to get this effect working as I can't see a way of it working out of the box with HTML. Here is an example the gives the desired effect:

$(document).ready(function() {
    $(':radio').click(function() {
        $(this).parent().siblings().children(':radio').attr('checked', false);
    });
});