Why is my javascript function finding my checkbox to be false

My code looks something like this

HTML

<div><input type="checkbox" name="showInactiveBox" value="showInactiveBox" id="showInactiveBox">Show inactive project numbers</div>

Javascript

$("#showInactiveBox").live("click", function () {
    if ($(this).is(":checked")) { //checkbox is checked
        $.ajax({
            type: "POST",
            url: "@Url.Action("UpdateInactiveBox", "Project")",
            data: {
                showInactive: true
            }
        })
        .done(function (data) {
            Debug.writeln("Check box is checked?: " + $("#showInactiveBox").is(":checked"));

            $("#project-numbers-grid").data("kendoGrid").dataSource.read();
        });

I have an else that looks similar to above, just sets the checkbox to false basically. My debug line above in the .done of the Ajax function returns the correct value whether it be checked or not. However I then call the .read() on my grid which relates to more javascript below:

read: {
                url: "@Html.Raw(Url.Action("GetActiveProjectNumbers", "Project"))",
                type: "POST",
                cache: false,
                dataType: "json",
                data: {
                    q: function () {
                        var model = {
                            projectid: "@Model.Id",
                        };
                        return JSON.stringify(model);
                    },
                    showinactive: $("#showInactiveBox").is(":checked")
                }
            },

When I put another Debug.writeline in the server, it is receiving the correct value for "q" but "showinactive" is always read in as false. Is there something with javascript that I don't quite understand where going from function to function will read a different value for ($"checkboxid").is(":checked")?

Thanks