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;

});

在我的View模型中，我调用数据服务来填充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

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

1 个答案: