How to Code a Radio button in a single page Application

Question

I have a single page application modelled after Hot Towel. In the view, there is a radio button (there can be multiple instances of this radio button). The problem is that when there are multiple rows of this radio button, the user is only able to select one selection within the multiple rows of the radio button. I am not sure how to get it in such a way that, each row contains its unique instance of the radio button. I know the below code is wrong, but it illustrates what I am trying to do- HTML-

                     <table style="width: 100%">
                    <tbody data-bind="foreach: LoanDetails()">
                        <tr style="border: none">
                            <td style="font-weight: bold">Doc/Stand By:</td>
                             <td colspan="3">
                                    <input type="radio" name="DocStandby" value="Documentary" data-bind="checked: DocStandby" /> Documentary
                                    <input type="radio" name="DocStandby" value="Stand By" data-bind="checked: DocStandby" /> Stand By

                            </td>
                        </tr>

DATA SERVICE

 define(['services/logger', 'durandal/system', 'plugins/router'],
function (logger, system, router) {
    var LCApplicationModel = function (SeedID, clientID, DocStandby) {
        var self = this;

        self.SeedID = SeedID;
        self.clientID = clientID;
        self.DocStandby = DocStandby;

    };

    var LCApplication = function (LCObservable, clientID, SeedID) {

        var clients = new LCApplicationModel(SeedID(), clientID(), '');

        LCObservable.push(clients);

        return LCObservable;
    };

         var dataservice = {
        LCApplication: LCApplication
    };
    return dataservice;

});

In my View model, I call the data service to populate the LoanDetails()-

 return LCDataService.LCApplication(LoanDetails, ClientID, nextnum);

How can I make this work?

Answer 1

Radio buttons use the name property for grouping. When providing a name that is the same for two different controls the browser expects that by convention those are grouped and only one can be checked at a time. This is the difference between a radio button and a checkbox.

If you want to allow selecting multiple radios, change the name.

<input type="radio" name="DocStandby1" value="Documentary" data-bind="checked: DocStandby" /> Documentary
<input type="radio" name="DocStandby2" value="Stand By" data-bind="checked: DocStandby" /> Stand By

Example

Updated Example