KnockoutJS property doesn't update when changing value with Jquery

Question

I have a serie of checkboxes and I want to gather the selected one. The checkboxes are in div's and when the div is clicked the checkbox should get checked as well:

var oCheckBox = $($(this).find('.chkSocialMediaItem').get(0));
oCheckBox.attr('checked', !$(oCheckBox).attr('checked'));

This works just fine but KnockoutJS doesn't pick up the change and so doesn't update my counter on the selected items.

I read somewhere you need to trigger the change event. But when I listen to the change event on the checkbox it does actually get triggered.

Any help would be appreciated, Thanks !

Update:

I have found a 'knockout' solution. In my div I did a data-bind off the 'click' and changed the checked value in that function:

<script type="text/html" id="Template">
    <div class="item" data-bind="click: DivClicked">
       <input type="checkbox" data-bind="checked: IsASelectedItem" class="chkSocialMediaItem"/>
    </div>
</script>


function SocialMediaSearchItem() {          
            this.IsASelectedItem = ko.observable();
            this.DivClicked = function () {
                this.IsASelectedItem(!this.IsASelectedItem());
            };
}

Is this the only solution? I would really like 2 see a Jquery solution as well.

Answer 1

I ran into the same issue... Although I did find a solution that worked for me that differed from the one posted by @RP Niemeyer, so I figured I would post it.

Knockout Version: 1.2.1 -- (knockout-1.2.1.js)

To uncheck the checkbox bound by Knockout I used the following

$('YourCheckBoxHere').removeAttr('checked');
$('YourCheckBoxHere').triggerHandler('click');

to check the checkbox bound by Knockout I used the following

$('YourCheckBoxHere').attr('checked', 'true');
$('YourCheckBoxHere').triggerHandler('click');

Hopefully if the other solution didnt work, perhaps this will =) ... wasted about 3 hours on this issue.

Answer 2

The checked binding only listens to the click event. Manually triggering the click event ends up getting the box out-of-sync based on when the actual checked value is set.

The preferred way to set the value is to update your view model value, as you have done in your second example above.

However, if you are using 1.3beta, then there is an easy way to connect an element with its corresponding data using the ko.dataFor API. It would look something like:

  var oCheckBox = $('.chkSocialMediaItem'),
      data = ko.dataFor(oCheckBox[0]);
      data.selectedItem(!data.selectedItem());