带Knockout.js的单选按钮列表

Question

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?

Answer 1

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

Answer 2

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/

Answer 3

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 :

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

I have changed it slightly by using on() instead of click() to account for these labels being generated dynamically.