水平和垂直独占单选按钮

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>

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

Answer 1

创意解决方案：

为什么不使用小部件？ 您可以提出诸如可以拖动和移动的图层之类的问题，例如：

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

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

第一个出现的就是第一个。

Answer 2

你必须使用 jQuery 来获得这个效果，因为我看不到它在 HTML 中开箱即用的方法。 Here is an example 给出了想要的效果：

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