Переключатель по горизонтали и вертикали

Question

Давным-давно пользуюсь этим сайтом, и мне никогда не приходилось заходить так далеко, чтобы задать свой вопрос ... ура заранее.

У меня есть группа "вопросов", которые должны быть перечислены. Затем пользователь должен оценить эти вопросы как 1-й, 2-й и 3-й (однако может быть гораздо больше, чем три вопроса).

Проблема, с которой я столкнулся, заключается в том, что, если я сделаю переключатель взаимоисключающим в одном направлении - пользователь может расставить все вопросы как # 2, однако если я сделаю их взаимоисключающими в другом направлении, пользователь может оценить то же самое вопрос как № 1, № 2, И № 3.

Есть ли способ (возможно, с использованием jquery / Jscript) сделать радио-кнопки взаимоисключающими в обоих направлениях?

Пример:

<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>

В приведенном выше примере значением является идентификатор вопроса (из БД)

Answer 1

Креативное решение:

Почему вы не используете виджет? Вы можете поместить вопросы, такие как слои, которые вы можете перетащить и переместить, например:

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

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

Первым появится первый.

Answer 2

Вы должны будете использовать jQuery, чтобы этот эффект работал, так как я не вижу способа, как это работает из коробки с HTML. Вот пример , который дает желаемый эффект:

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