Question

我正在尝试使用标签构建单选按钮列表，以便您可以单击标签来检查单选项。我在Chrome中运行得很好，但不是IE7。得到吐出的HTML似乎是正确的，但是当我点击标签时，相应的单选按钮就不会被选中。

的JavaScript

function ReuqestType(id, name, billable) {
    this.id = id;
    this.name = name;
    this.billable = billable;
}

function RequestViewModel() {
    var self = this;

    self.availableRequestTypes = [
        new ReuqestType(1, "Travel", true),
        new ReuqestType(2, "Bill Only", false),
        new ReuqestType(3, "Both", true)
    ];

    self.selectedRequestType = ko.observable();
}

HTML

Request Type
<br />
<!-- ko foreach: availableRequestTypes -->
<input type="radio" name="requestType" data-bind="value:id, attr: {'id': 'rt'+ id}" />
<label data-bind="text: name, attr:{'for':'rt'+id}">
</label>
<!-- /ko -->

这样做的首选方式是什么？

Answer 1

从最新版本的Knockout（2.1.0）开始，这似乎正常工作。

Answer 2

我对knockout.js不熟悉，但你通常只需将标签环绕输入框就可以将标签绑定到输入。

http://jsfiddle.net/QD2qC/

Answer 3

看起来你的HTML很好。 IE7的一个怪癖可能是无法确认动态生成的标签点击。

如果找不到合适的答案，可以随时使用this workaround：

$('label').on('click', function() {
   var labelId = $(this).attr('for');
   $('#' + labelId ).trigger('click');
});

我使用on()代替click()稍微更改了一下，以说明这些动态生成的标签。

带Knockout.js的单选按钮列表

3 个答案: