带有 Knockout.js 的单选按钮列表答案

【问题标题】：Radio Button List with Knockout.js带有 Knockout.js 的单选按钮列表
【发布时间】：2012-02-25 04:32:09
【问题描述】：

我正在尝试构建带有标签的单选按钮列表，以便您可以单击标签来检查单选项目。我在 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 -->

最好的方法是什么？

【问题讨论】：

标签： javascript data-binding radio-button knockout.js

【解决方案1】：

我不熟悉knockout.js，但是您通常可以通过使标签也环绕输入框来将标签绑定到输入。

http://jsfiddle.net/QD2qC/

【讨论】：

您不应该考虑用标签包装输入。这不是正确的标记，您可能会在浏览器之间获得不一致的行为。正确的做法是像操作一样使用标签上的for 属性
这是正确的标记，请参阅 HTML4 规范：w3.org/TR/html4/interact/forms.html#edef-LABEL

【解决方案2】：

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

如果您找不到正确的答案，您可以随时使用this workaround：

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

我通过使用on() 而不是click() 稍微改变了它，以说明这些标签是动态生成的。

【讨论】：

我没有在标签或问题的任何地方列出 jQuery。这是 Knockout.js 框架的问题/问题。它声称是跨浏览器的，我需要知道这是否属实，没有大量的 JQ 黑客来让浏览器正常运行。
对我来说，这不是 knockout.js 框架的问题。如果它输出正确的 html，那么问题就出在其他地方，这就是为什么我建议它可能是 IE7 特定的怪癖。
我找到了一个可能的解决方案：stackoverflow.com/questions/1252690/… 是不是因为你的输入字段被隐藏了？
不，这正是我在问题中的内容，正如我已经说过的那样；它在 IE7 中不起作用。

【解决方案3】：

从最新版本的 Knockout (2.1.0) 开始，这似乎可以正常工作。

【讨论】：