水平和垂直獨家單選按鈕

一直使用這個網站的年齡，從來沒有去甚至要問我自己的問題......提前歡呼。水平和垂直獨家單選按鈕

我有一組「問題」將被列出。然後用戶必須將這些問題排列爲第一，第二和第三（然而，可以有多於三個的問題）。

我遇到的問題是，如果我使單選按鈕在一個方向上互斥 - 用戶可以將所有問題排列爲＃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（從DB）

來源

2010-10-14 hubare

ID可能不以數字開頭。如果你這樣做，你應該改變它。 – 2010-10-14 09:57:22

哎呀......歡呼聲。 – hubare 2010-10-14 10:30:58

你將不得不使用jQuery來獲得這種效果，因爲我看不到用HTML工作的方式。 Here is an example給出了預期的效果：

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

來源

2010-10-14 09:59:14

謝謝。我認爲，當這一切都投入生產時，用戶界面可能需要更仔細地查看，但這正是我所期待的。另外...該網站已被收藏:) – hubare 2010-10-14 10:09:21

我看到jsfiddle被越來越多地使用，幾乎和SO本身一樣方便 – 2010-10-14 10:15:59

創造性的解決方案：

你爲什麼不使用窗口小部件？你可以把類似的層問題，你可以拖動和移動，例如：

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

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

最先出現的將是第一個。

來源

2010-10-14 09:42:39 netadictos

我沒有想過這件事。唯一的問題是，該網站的職責之一是儘量減少這類用戶交互，因爲用戶可能會年齡偏大（不是泛泛而談，但該網站面向的是老年用戶誰不懂電腦）。 – hubare 2010-10-14 09:49:13

^^^爲此歡呼，心...現在你已經說過了，重新思考數據的表示可能是一個好主意。也許使用觸發後貼的按鈕並重新排列問題（或相似）。感謝 – hubare 2010-10-14 09:54:00

+1進行拖放。老年人不應該有太多的麻煩，如果你做得對，如果你顯示它，通過動畫GIF作爲教程或什麼。 – 2010-10-14 09:56:38

水平和垂直獨家單選按鈕

回答

相關問題