Checkbox doesn't get checked in knockout

Question

I have a checkbox and click event for checkbox for updating data. When I click on the checkbox the data is updating but the checkbox does not get not checked.

This is my html code:

<td>
 <input type="checkbox" data-bind="checked: status, disable: status, click: $root.UpdateStatus" />
</td>

This is my script:

self.UpdateStatus = function (tblUsers) {
    $.ajax({
        type: "POST",
        url: 'SinglePageApp.aspx/UpdateStatus',
        data: "{statusVal: 'true',goalId: " + tblUsers.goalId + "}",
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            alert(result.d);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
            alert(errorThrown);
        }
    });
};

I want my checkbox to get checked when it is clicked. And after that put updated data after checkbox clicked.

Answer 1

It seems like you're disabling the checkbox if status = false, but the only way to set status to true is if you check it. That's why the checkbox never gets checked even though knockout knows it's clicked.

Since it's disabled, you won't be able to check the checkbox, so you have to remove the disable: status data binding, or place the disable logic some place so you can actually change the value of the checkbox.

Answer 2

I tried it here and it works when UpdateStatus returns true (not preventing the value-change) and status must obviously be an observable value.

Answer 3

See: http://knockoutjs.com/documentation/click-binding.html

Note 3: Allowing the default click action
By default, Knockout will prevent the click event from taking any default action. This means that if you use the click binding on an a tag (a link), for example, the browser will only call your handler function and will not navigate to the link’s href. This is a useful default because when you use the click binding, it’s normally because you’re using the link as part of a UI that manipulates your view model, not as a regular hyperlink to another web page.

However, if you do want to let the default click action proceed, just return true from your click handler function.

---

Edit: added example showing where to return true in the function. It has to be return from the actual function itself, not the Ajax success or error handler.

self.UpdateStatus = function (tblUsers) {
    $.ajax({
        type: "POST",
        url: 'SinglePageApp.aspx/UpdateStatus',
        data: "{statusVal: 'true',goalId: " + tblUsers.goalId + "}",
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            alert(result.d);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
            alert(errorThrown);
        }
    });
    // Return true to allow default click action.
    return true;
};

Answer 4

That's because the default behavior of event handlers in Knockout is to disable the default action for the event. In this case, your click handler does that.

A solution that I recommend is to avoid using the click handler and have your UpdateStatus run as a subscription to status. In your view model constructor, you should add self.status.subscribe(self.UpdateStatus, self);

Another solution is the one mentioned here that involves returning true from your click handler.