如何在单页应用程序中编写单选按钮

Question

我有一个以 Hot Towel 为模型的单页应用程序。在视图中，有一个单选按钮（该单选按钮可以有多个实例）。问题是当这个单选按钮有多行时，用户只能在多行单选按钮中选择一个选项。我不知道如何以这样的方式获得它，每一行都包含其唯一的单选按钮实例。我知道下面的代码是错误的，但它说明了我正在尝试做的事情 - 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>

数据服务

 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;

});

在我的视图模型中，我调用数据服务来填充 LoanDetails()-

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

我怎样才能做到这一点？

Answer 1

单选按钮使用 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