Checkbox doesn’t get checked in knockout

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

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

Method 2

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.

Method 3

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.

Method 4

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0