How to Code a Radio button in a single page Application

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?

Answers


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


Need Your Help

Rails 4 Assets Bug, not loading images

css ruby-on-rails ruby ruby-on-rails-4

To cut a long story short, because I wasted enough time with this stupid framework.

Suppress Domino console message "error connecting to server ... the remote server..."

java database xpages lotus-domino

I have an XPages app using Java backend that tries to access mail databases via session.getDatabase("foo", "bar"). My script is only to collect all mail files that the logged in user is able to acc...