Checkbox value always give 'false' in jquery.serializeJSON plugin

This post shows you how to de-serialize JSON data of check box values or how to fix 'checkbox value always give 'false' in jquery.serializeJSON plugin'

For example:

ASP.NET Core

<input type="checkbox" asp-for="Active" class="form-control" />

ASP.NET MVC

@Html.CheckBoxFor(m => m.Active)

Your html should be generated as shown below.

<input type="checkbox" class="form-control" data-unchecked-value="false" data-val="true" data-val-required="The Active field is required." id="Active" name="Active" value="true">

You can de-serialize by using serializeJSON as shown below.

var obj = $('form').serializeJSON();
console.log(obj);

For example

function addEdit(form) {
    $.validator.unobtrusive.parse(form);
    if ($(form).valid()) {
        var model = $(form).serializeJSON();
        $.ajax({
            type: 'POST',
            url: '/api/todo',
            data: JSON.stringify(model),
            contentType: 'application/json',
            success: function (response) {
                if (response.success) {
                   //do something
                }
            }
        });

    }
    return false;
}

You will get true when checked and false (from data-unchecked-value attribute) when you using $('form').serializeJSON();