带 Knockout.js 的单选按钮列表
我正在尝试构建一个带有标签的单选按钮列表，以便您可以单击标签来检查单选项目。我的东西在 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 -->
执行此操作的首选方法是什么？
I'm trying to build a list of radio buttons with labels so that you can click the label to check the radio item. What I have works fine in Chrome, but not IE7. The HTML that get's spit out seems like it is correct, but when I click on the label, the corresponding radio button doesn't get selected.
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 -->
What is the preferred way to do this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
从最新版本的 Knockout (2.1.0) 开始，这似乎可以正常工作。
This seems to be working correctly now as of the newest version of Knockout (2.1.0).
我不熟悉 knockout.js，但通常您也可以通过使标签环绕输入框来将标签绑定到输入。
http://jsfiddle.net/QD2qC/
I'm unfamiliar with knockout.js, but you can normally bind label's to inputs just by making the label wrap around the input box too.
http://jsfiddle.net/QD2qC/
看起来你的 HTML 没问题。这可能是 IE7 的一个怪癖，无法确认动态生成的标签的点击。
如果您找不到正确的答案，您可以随时使用 此解决方法：
我通过使用
on()而不是click()来考虑到这些标签是动态生成的。It looks like your HTML is fine. It could be a quirk of IE7 not being able to acknowledge clicks of labels that have been generated dynamically.
If you can't find a proper answer, you could always use this workaround:
I have changed it slightly by using
on()instead ofclick()to account for these labels being generated dynamically.