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

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