Checkbox with knockout data binding giving wrong value on checked event

Question

<input type="checkbox" data-bind="checked: appealsFromThisCase, event: { change: onappealsFromThisCaseChange}" id="appealsforCaseCheckBox"/>

   vm.onappealsFromThisCaseChange = function () {
        if (vm.appealsFromThisCase())
        {
            vm.predicate(new breeze.Predicate("CaseId", "==", caseID));
            return datacontext.getCaseAppeals().then(function () {
                return true;
            });
        }
        } 
        else
            return vm.getAppeals();

Above is a checkbox which is bound to appealsFromThisCase observable which is initially false. On change event, onappealsFromThisCaseChange is fired and I see that the observable appealsFromThisCase gives true when checkbox is unchecked and false when the checkbox is checked.

score 3 · Accepted Answer · edited May 23 '17 at 11:50

3

It looks like ko handles the change event in a strange way. Fiddle: http://jsfiddle.net/wnLyV/1/

js:

var VM = function(){
    var self = this;
    self.appealsFromThisCase = ko.observable(false);
    self.appealsFromThisCase.subscribe(function(value){
        console.log("from subscribe: " + value);
    })
    self.onappealsFromThisCaseClick = function(data){
        console.log("from click: " + data.appealsFromThisCase());
        return true;
    }
    self.onappealsFromThisCaseChange = function(data){
        console.log("from change: " + data.appealsFromThisCase());
        return true;
    }    
}


ko.applyBindings(new VM());

Also see these:

knockout.js and listen to check event on checkbox

Knockout checkbox change event sends old value

Can you replace the change event binding with a click binding, or with a subscription, like in the fiddle, or do you specifically need change?

EDIT:

So, based on the comments below, the final answer is:

Wrap onappealsFromThisCaseChange function into another function, which will be the actual handler and always return true. So just make another handler like this:

function(){ 
    onappealsFromThisCaseChange(); 
    return true; 
}

edited May 23 '17 at 11:50

Community

1
1

answered Nov 05 '13 at 15:18

pax162

4,735
2
22
28

I did change the event to click, which gives me the right value of the checkbox. But in spite of returning true from the event handler, the checkbox is not getting checked. I have added the code for the event handler in my question. – user2585299 Nov 05 '13 at 16:59
Have you tried moving the return true outside of the condition, at the bottom of the onappealsFromThisCaseChange function? Maybe the if conditions aren't true and the code doesn't get executed. – pax162 Nov 05 '13 at 17:39
The condition is true and the code does get executed but the checkbox is not getting checked. Instead, I reverted back to using change event and in my eventhandler instead of checking for if (vm.appealsFromThisCase()), I am checking if (!vm.appealsFromThisCase()) (reverted the condition) – user2585299 Nov 05 '13 at 18:18
Then what if you also return true at the bottom of the if ? – pax162 Nov 05 '13 at 18:18
I have edited my event handler in the question. It also has an else part. I cannot add any return statements outside of that code block. – user2585299 Nov 05 '13 at 18:37
ok, then what if you wrap onappealsFromThisCaseChange function into another function, which will be the actual handler and always return true? So just make another handler like this: function(){ onappealsFromThisCaseChange(); return true;} – pax162 Nov 05 '13 at 18:43
You are great ! That works. Thank you so much. You can write that as an answer & I will mark it as my final answer. – user2585299 Nov 08 '13 at 20:53

Checkbox with knockout data binding giving wrong value on checked event

1 Answers1