CODEWITHSUNDEEP
knockout.jsjquery-templates
Pawan Nogariya
Pawan Nogariya

Reputation: 8980

Radio button list inside jquery template using knockout

I am using knockout with jquery template, I am stuck in a place in my template. Let me show you the code first. Here is my template

 <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>

And here is how I am using it 

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

So what basically it is doing is, it is looping for each question response and checks if question type is FreeForm then it creates a textarea else it picks questionResponse's object array property "Options" and uses jquery {{each}} to show each option as a radio button. And on submit I am picking the "ResponseValue" property's value, if it is textarea then I get textarea value or else I get selected radio button's value. This all is working perfectly fine.

This is how it looks in 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..

Currently I am assigning "QuestionId" as a name for radio buttons with the thinking to make them mutually exclusive within the question. So here second question's all the 3 radio buttons will have say name="111-1111-1111". And third question's all the 6 radio buttons will have say name="222-2222-2222" Note - QuestionId is of type Guid

The only and small issue stuck me is, it does not allow me to change my selection, I mean say if I select RadioButton1 for question 2 then it does not allow me to select RadioButton2 or 3, same goes for each question. This happens in firefox. While IE 9 doesn't even allow to select any of radio button in the page.

Any help will be appreciable

Thanks in advance

Upvotes: 2

Views: 3827

Answers (1)

RP Niemeyer
RP Niemeyer

Reputation: 114792

Your best bet is to use the checked binding with your radio buttons. Your binding would look something like:

<input type="radio" data-bind="attr:{name:QuestionId, value: option.Value }, checked: $data.ResponseValue" />${option.Value}</td>
  • The name attribute makes sure that they are mutually exclusive within a question.
  • The value attribute determines what the checked binding will use for its value
  • The checked binding will set option.Value with the option's value

Here is a sample: http://jsfiddle.net/rniemeyer/ncERd/

Upvotes: 7

Related Questions