jquery - Knockout checked binding -

jquery - Knockout checked binding -

so i'm trying utilize custom knockout checkbox binding trigger visibility on divs in form. i'm having hard time figuring out why won't work correctly. i've gotten point initial value gets set, won't reupdate. problem don't seem able bind checkbox correctly.

i've got fiddle help create more sense. when loads sets right values, subsequent clicking doesn't anything.

i'm stumped i've looked @ long.

var info = true; ko.bindinghandlers.aipchecked = { update: function(element, valueaccessor) { var options = valueaccessor(); alert(options.value()); if (options.value()) { $(options.checked).slidedown('fast', function () { }); $(options.unchecked).slideup('fast', function () { }); } else { $(options.checked).slideup('fast', function () { }); $(options.unchecked).slidedown('fast', function () { }); } options.value(options.value()) //ko.bindinghandlers.checked.update(element, options.value); } }; var viewmodel = { control:[ { checked: '#one', unchecked: '', value: ko.observable(true) } ] }; viewmodel.control[0].value(data); ko.applybindings(viewmodel);

the html

<div data-bind="foreach: control"> <input type="checkbox" data-bind="aipchecked:{value: value,checked:checked,unchecked:unchecked}" /> <label data-bind="text: value"></label> </div> <div id="one">testing</div>

http://jsfiddle.net/gdefilippi/suayr/8/

v/r, geoffrey

two things going in code below -

use 'checked' binding instead of 'value' binding in html, check event changes state of checkbox.

<div data-bind="foreach: control"> <input type="checkbox" data-bind="checked:value,aipchecked:{value: value,checked:checked,unchecked:unchecked}" /> <label data-bind="text: value"></label> </div> <div id="one">testing</div>

remove checked update binding js code.

var info = true; ko.bindinghandlers.aipchecked = { update: function(element, valueaccessor) { var options = valueaccessor(); alert(options.value()); if (options.value()) { $(options.checked).slidedown('fast', function () { }); $(options.unchecked).slideup('fast', function () { }); } else { $(options.checked).slideup('fast', function () { }); $(options.unchecked).slidedown('fast', function () { }); } //ko.bindinghandlers.checked.update(element, options.value); } }; var viewmodel = { control:[ { checked: '#one', unchecked: '', value: ko.observable(true) } ] }; viewmodel.control[0].value(data); ko.applybindings(viewmodel);

jquery checkbox knockout.js custom-binding