Lista de botones de radio con Knockout.js

Question

Estoy tratando de crear una lista de botones de opción con etiquetas para que pueda hacer clic en la etiqueta para verificar el elemento de la radio. Lo que tengo funciona bien en Chrome, pero no en IE7. Parece que es correcto el código HTML que sale, pero cuando hago clic en la etiqueta, el botón de opción correspondiente no se selecciona.

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 --> 

¿Cuál es la mejor forma de hacer esto?

Answer 1

Parece que esto funciona correctamente ahora con la última versión de Knockout (2.1.0).

Answer 2

No estoy familiarizado con knockout.js, pero normalmente puede vincular las etiquetas a las entradas simplemente haciendo que la etiqueta se enrede alrededor de la caja de entrada también.

http://jsfiddle.net/QD2qC/

Answer 3

Parece que tu HTML está muy bien. Podría ser una peculiaridad de IE7 no poder reconocer clics de etiquetas que se han generado dinámicamente.

Si no puede encontrar una respuesta adecuada, siempre se puede utilizar this workaround:

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

he cambiado ligeramente mediante el uso de on() en lugar de click() dar cuenta de estas etiquetas se generan de forma dinámica.