javascript - チェックボックスでノックアウト双方向バインディングが機能しない

Question

ユーザーのリストオプションを生成するフォームがあり、各オプションにはチェックボックス、ラベル、および入力フィールドがあります。入力フィールドは、チェックボックスがチェックされている間のみ表示されます。オプションは、JSON 呼び出しによって生成されます。

ただし、ノックアウトは、目に見えるバインディングを使用するときに期待したことをしていないようです。行をチェックするとテキスト ボックスが正しく表示されますが、チェックを外すとテキスト ボックスが表示されたままになります。

これは、観察可能な「選択された」がオーバーライドされているか、そのようなものと関係があると思われますが、私はアイデアに行き詰まっています。

問題を示すフィドルは次のとおりです。http://jsfiddle.net/qccQs/2/

フィドルで使用しているHTMLは次のとおりです。

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

フィドルで使用しているJavaScriptは次のとおりです。

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

これを期待どおりに動作させる方法についてのアイデアはありますか?