使用击倒的jquery模板里面的单选按钮列表

Question

我正在使用带有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()}">

所以基本上它正在做的是,它循环每个问题响应并检查问题类型是否为FreeForm然后它创建一个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个单选按钮都会说name ="111-1111-1111".第三个问题是所有6个单选按钮都会说name ="222-2222-2222"注 - QuestionId是Guid类型

唯一和小问题困扰我的是,它不允许我改变我的选择,我的意思是如果我为问题2选择RadioButton1然后它不允许我选择RadioButton2或3,每个问题也是如此.这发生在Firefox中.虽然IE 9甚至不允许选择页面中的任何单选按钮.

任何帮助都会很明显

提前致谢

Answer 1

最好的办法是使用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/