javascript - Knockout two-way bindings not working on checkbox -

i have form generates list options user, each option has check-box, label , input field. input field should shown whilst check-box ticked. options generated through json call.

however, knockout doesn't seem doing have expected when using visible binding. when check row, text box correctly shown when uncheck it, text box stays shown.

i suspect to-do observable "selected" being overridden or stuck ideas.

here fiddle showing issue: http://jsfiddle.net/qccqs/2/

here html using in fiddle:

<div data-bind="template: { name: 'reason-template', foreach: reasonlist }"></div>  <script type="text/html" id="reason-template">     <div>         <input type="checkbox" data-bind="value: selected" />         <span data-bind="text: name"></span>         <input type="text" class="datepicker" data-bind="value: date, visible: selected" />     </div> </script> 

here javascript using in fiddle:

function reasonitem(name) {     this.name = ko.observable(name);     this.date = ko.observable(null);     this.selected = ko.observable(false); };  function myviewmodel() {     var self = this;     self.reasonlist = ko.observablearray([  ]) };  var vm = new myviewmodel();  new request.json({     url: '/echo/json/',     data: {         json: json.encode({             data: [                 { name: "reason 1", selected: false, date: null },                 { name: "reason 2", selected: false, date: null },                 { name: "reason 3", selected: false, date: null }             ]         }),         delay: 0     },     onsuccess: function(response) {         $.each(response.data, function(index, reason) {             vm.reasonlist.push(new reasonitem(reason.name));         });     } }).send();  ko.applybindings(vm); 

any ideas on how can behave expected to?

for inputs of checkbox type need use checked instead of value:

<input type="checkbox" data-bind="checked: selected" /> 

see knockout documentation.