Radio Button List with 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?

Hammers

Answer 1

This seems to be working correctly now as of the newest version of Knockout (2.1.0).

Hammers

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/

Randeerandel

You shouldn't consider wrapping inputs with labels. It's not correct markup and you may get inconsistent behaviour between browsers. THe correct way of doing it is as the op is doing using the for attribute on the label – Gastroenterostomy

This is correct markup, see HTML4 specs: w3.org/TR/html4/interact/forms.html#edef-LABEL – Randeerandel

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.

Gastroenterostomy

I didn't list jQuery anywhere in the tags or the question. This is a problem/question with the Knockout.js framework. It claims to be cross-browser and I need to know if that's true or not without a lot of JQ hacks to get the browser to behave. – Hammers

To me, this is not a problem with the knockout.js framework. If it outputs the correct html then the problem lies elsewhere, which is why I suggested it might be an IE7 specific quirk. – Gastroenterostomy

I've found a possible solution: #1253190 Is it because your input fields are hidden? – Gastroenterostomy

No, this is exactly what I have in the question and as I've already stated; it doesn't work in IE7. – Hammers