使用敲除的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 然后它创建一个文本区域，否则它选择 questionResponse 的对象数组属性“选项”并使用 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/