水平和垂直排他单选按钮

Question

使用该网站已有很长时间了，从来没有问过我自己的问题……提前打气。

我有一组要列出的“问题”。 然后，用户必须将这些问题排名为第一，第二和第三（但是可能存在三个以上的问题）。

我遇到的问题是，如果使单选按钮在一个方向上互斥-用户可以将所有问题排在＃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>

在上面的示例中，该值是问题的ID（来自数据库）

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);
    });
});