Even if Checkbox not checked, value in controller always shows true

When I submit my form data to the controller, the property always shows true, even if the Checkbox, binded to that property is not checked.

I have inspected my Html, and it seems that the checked property is not removed from the Checkbox when unchecking it. This behavior only occurs on this specific view, no where else.

Here is my Html:

<div class="data-section" id="PeriodFilter">
@* ROW 1 *@
<div class="form-group">
    <div class="col-sub-2" name="reportPeriodGroup">
        <div class="col-sub-3-150"><label>@Html.CheckBoxFor(model => model.IsQuarterly) Quarterly:</label></div>
        <div class="col-sub-3">@Html.DropDownListFor(model => model.QuarterStartFilter, Model.SelectList_Quarters, new { @class = "form-control" })</div>
        <div class="col-sub-3">@Html.DropDownListFor(model => model.QuarterYearFilter, Model.SelectList_Years, new { @class = "form-control" })</div>
    </div>

    <div class="col-sub-2" name="reportPeriodGroup">
        <div class="col-sub-3-150"><label>@Html.CheckBoxFor(model => model.IsMonthly) Monthly:</label></div>
        <div class="col-sub-3">@Html.DropDownListFor(model => model.MonthStartFilter, Model.SelectList_Months, new { @class = "form-control" })</div>
        <div class="col-sub-3">@Html.DropDownListFor(model => model.MonthYearFilter, Model.SelectList_Years, new { @class = "form-control" })</div>
    </div>
</div>

@* ROW 2 *@
<div class="form-group">
    <div class="col-sub-2" name="reportPeriodGroup">
        <div class="col-sub-3-150"><label>@Html.CheckBoxFor(model => model.IsYearly) Yearly:</label></div>
        <div class="col-sub-3">@Html.DropDownListFor(model => model.YearFilter, Model.SelectList_Years, new { @class = "form-control" })</div>
        <div class="col-sub-3"> </div>
    </div>

    <div class="col-sub-2" name="reportPeriodGroup">
        <div class="col-sub-3-150"><label>@Html.CheckBoxFor(model => model.IsCustom) Custom:</label></div>
        <div class="col-sub-3">@Html.EditorFor(model => model.DateStartFilter, new { htmlAttributes = new { @class = "form-control" } })</div>
        <div class="col-sub-3">@Html.EditorFor(model => model.DateEndFilter, new { htmlAttributes = new { @class = "form-control" } })</div>
    </div>
</div>

Here is the JQuery I use, to uncheck all other Checkboxes that are not checked. I have debugged this, and should work fine according to me.

load: function () {
    $("#PeriodFilter input[type='checkbox']").each(function () {
        if ($(this).is(":checked")) {
            $(this).each(reportPeriod.selectionChanged);
        }
    })
},
selectionChanged: function () {
    var thisResult = $(this);
    var currentGroup = $(thisResult).closest("[name='reportPeriodGroup']")
    var groupsToDisabled = $("#PeriodFilter [name='reportPeriodGroup']").not(currentGroup);

    currentGroup.find(":input").prop("disabled", false);
    currentGroup.find("select").prop("disabled", false);

    groupsToDisabled.find(":input").prop("disabled", true);
    groupsToDisabled.find("select").prop("disabled", true);

    var checkBoxes = $("#PeriodFilter input[type='checkbox']");
    checkBoxes.prop("disabled", false); // Never allow checkboxes to be disabled
    checkBoxes.not(thisResult).prop("checked", false);
},

Here, is an image of what I see when I inspect the page source.

Why am I experiencing this behavior?