Question

多年来一直在使用这个网站，从来没有去过问自己的问题......提前欢呼。

我有一组要列出的“问题”。然后，用户必须将这些问题排在第1，第2和第3（但可能会有超过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);
    });
});

水平和垂直专用单选按钮

2 个答案: