List of radio buttons with Knockout.js

Question

I am trying to create a list of radio buttons with shortcuts so that you can click the label to check the radio element. That works fine for me in Chrome, but not in IE7. The HTML that spits out seems correct, but when I click on the label, the corresponding radio button is not 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

It seems that now it works correctly with the newest version of the knockout (2.1.0).

Answer 2

I am not familiar with knockout.js, but you can usually attach a shortcut to the inputs by simply making the label wrapped around the input window.

http://jsfiddle.net/QD2qC/

Answer 3

It looks like your HTML is fine. This could be a IE7 quirk that cannot confirm clicks on shortcuts that were dynamically generated.

If you cannot find the correct answer, you can always use this workaround :

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

I changed it a bit using on() instead of click() to take into account that these shortcuts are generated dynamically.