Radio Button List with Knockout.js

Question

Я пытаюсь создать список переключателей с ярлыками, чтобы вы могли щелкнуть метку, чтобы проверить элемент радио. То, что у меня отлично работает в 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 --> 

Что является предпочтительным способом сделать это?

Answer 1

Кажется, что он работает правильно, начиная с последней версии нокаута (2.1.0).

Answer 2

Я незнаком с knockout.js, но вы можете обычно привязывать метки к входам, просто делая этикетку обернутой вокруг окна ввода.

http://jsfiddle.net/QD2qC/

Answer 3

Похоже, ваш HTML отлично. Это может быть причудой IE7, неспособной подтвердить клики ярлыков, которые были созданы динамически.

Если вы не можете найти правильный ответ, вы всегда можете использовать this workaround:

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

Я изменил его немного с помощью on() вместо click(), чтобы учесть эти метки генерируются динамически.