jquery模板中使用淘汰賽的單選按鈕列表

我使用jquery模板的淘汰賽，我被困在我的模板中的某個地方。我先讓你看看代碼。這裏是我的模板jquery模板中使用淘汰賽的單選按鈕列表

<script type="text/x-jquery-tmpl" id="questionTemplate"> 
     <div class="questions"> 
       <div data-bind="text: QuestionText" style="font-weight:bold;"></div> 
       {{if QuestionType == "FreeForm" }} 
         <textarea rows="3" cols="50" data-bind="value: ResponseValue"></textarea> 
        {{/if}} 

        {{if QuestionType != "FreeForm" }} 
         <table> 
         {{each(i,option) Options}} 
         <tr> 
         <td> 
         <input type="radio" data-bind="attr:{name:QuestionId},click:function(){ResponseValue=option.Value;}" />${option.Value}</td><td>- ${option.ResponsePercent} %</td> 
         </tr> 
         {{/each}} 
         </table>  
        {{/if}} 
      </div> 
    </script>

這裏是我如何使用它

<div data-bind="template:{name:'questionTemplate',foreach:questionResponses()}">

所以它是做什麼的基本上是，它爲每個問題的回答，並檢查循環，如果問題類型是自由曲面則它會創建一個textarea，然後選擇questionResponse的對象數組屬性「Options」並使用jquery {{each}}將每個選項顯示爲一個單選按鈕。並提交我選擇「ResponseValue」屬性的值，如果它是textarea然後我得到textarea值或否則我得到選定的單選按鈕的值。這一切都工作得很好。

這是它的外觀在UI

1. Tell me about yourself 
[A Text Area Since it is a FreeForm Question] 

2. How much you will rate yourself in MVC3? 
RadioButton1 
RadioButton2 
RadioButton3 

3. Blah Blah Blah? 
RadioButton1 
RadioButton2 
RadioButton3 
RadioButton4 
RadioButton5 
RadioButton6 


... so.. on..

目前我分配「QuestionId」作爲與思維單選按鈕，以使他們的問題中互相排斥的名稱。所以這裏第二個問題的所有3個單選按鈕都會有名稱=「111-1111-1111」。而第三個問題是所有的6個單選按鈕會說NAME =「222-2222-2222」注 - QuestionId是類型的Guid

唯一的小問題卡住我的是，它不會讓我改變我選擇，我的意思是說，如果我爲問題2選擇RadioButton1，那麼它不允許我選擇RadioButton2或3，對於每個問題也是如此。這發生在Firefox。雖然IE 9甚至不允許選擇頁面中的任何單選按鈕。

任何幫助將很可觀

在此先感謝

來源

2011-11-15 Pawan Nogariya

最好的辦法是使用checked與單選按鈕結合。你的綁定將類似於：

<input type="radio" data-bind="attr:{name:QuestionId, value: option.Value }, checked: $data.ResponseValue" />${option.Value}</td>

的name屬性可以確保他們是一個問題中相互排斥。
的value屬性決定什麼 checked結合將用於其價值
的checked綁定將設置option.Value與期權的價值

這裏有一個例子：http://jsfiddle.net/rniemeyer/ncERd/

來源

2011-11-15 14:00:54

感謝很多人！有效。 :) :) 你能告訴我爲什麼你使用$ data.ResponseValue，而不只是ResponseValue，因爲一旦我也試過相同的我的意思是檢查屬性，但我使用它像這樣檢查：ResponseValue，所以它不是加工。 –

jQuery模板中的'$ data'指的是整個數據綁定到模板。由於這段代碼是在一個循環內{{each}}，它改變了範圍，所以我只想具體說明被綁定的'ResponseValue'。 –

啊！找到了你。再次感謝！！ –

jquery模板中使用淘汰賽的單選按鈕列表

回答

相關問題