CheckBoxFor, when I reload the page I can check already checked checkboxes

Question

I have a weird issue, I check a checkbox, then if I return the same view then my checked checkboxes remain checked. But if I go to uncheck them, it checks them again. Then after that the behavoir is back to normal, I can uncheck them and recheck them etc. But it means I have to double click to uncheck already checked checkboxes after a page refresh.

I have checked via chrome debugger and in my controller that they are infact checked before and after the first click of the checkbox.

 <td>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary checkboxes">
           <span class="glyphicon glyphicon-unchecked large-glyphicon"></span>
           - @Html.CheckBoxFor(m => m.Equipment[i].Checked, new {@class= "assetCheckBox" })

             @Model.Equipment[i].AsssetNumber
        </label>
   </div>
</td>

My model has a list of equipment objects which all have the field

   public bool Checked { get; set; }

And my controller

    public ActionResult UpdatStatus(EquipmentSearch search)
    {
        _repository.Search = search;
        var userActionResult = Services.EsignSecurity.Esign(search.Username, search.Password, _repository.SaveEquipmentChanges);

        ShowResultInModal(userActionResult.Success, userActionResult.ReturnMessage);


        return View("Index", GetMatchingEquipment(search.SearchType, search.SearchInput));

    }

My script:

$(document).ready(function () {
BindPageLoadEvents();
});


function BindPageLoadEvents() {
$(function() {
    $(".assetCheckBox").change(function() {

        if ($(this).prop("checked")) {
            activateEsign($(this).parent());
            $(this).prev().addClass("glyphicon-ok-circle");
            $(this).prev().removeClass("glyphicon-unchecked");
        } else {
            deactivateEsign($(this).parent());
            $(this).prev().removeClass("glyphicon-ok-circle");
            $(this).prev().addClass("glyphicon-unchecked");
        }
    });
});
}


function ifNothingCheckedDisableEsignActions() {
// ReSharper disable once CssBrowserCompatibility
if ($("#tblEquipment input:checkbox:checked").length > 0) {
    $("#pnlEsignActions").find("*").removeAttr("disabled");
} else {
    $("#pnlEsignActions").find("*").attr("disabled", true);
}
}
function activateEsign(element) {
    $(element).removeClass("btn-primary");
    $(element).addClass("btn-warning");
}

function deactivateEsign(element) {
    $(element).removeClass("btn-warning");
    $(element).addClass("btn-primary");
}

EDIT: I've added more code that the checkbox is nested in as I think that may what's causing the issue. Would greatly appreciate any thoughts.

What `GetMatchingEquipment` method belongs to and what process occur behind it? Something may set the property value where checkbox bounds to when the page reloaded & passing viewmodel properties. — Tetsuya Yamamoto, Oct 16 '17 at 10:14
@TetsuyaYamamoto it populates an EquipmentSearch object and returns it, which is my view model. The EquipmentSearch object has a list of Equipment objects which are what have the checkbox field. That list is populated but the checkbox field is never set. — Jack Reilly, Oct 16 '17 at 10:20
@TetsuyaYamamoto if I'm returning a new viewmodel, how do the same checkboxes remain checked on page reload? The checkboxes are not saved to DB or anywhere else, just in the previous models property. — Jack Reilly, Oct 16 '17 at 10:25
Because the values are added to `ModelState`. If you want to return a new view model, then follow the PRG pattern — , Oct 16 '17 at 10:33
Read [this answer](https://stackoverflow.com/questions/26654862/textboxfor-displaying-initial-value-not-the-value-updated-from-code/26664111#26664111) to understand the behavior — , Oct 16 '17 at 10:34
@StephenMuecke thanks, that explains the persistence. Any idea why the persisted checkboxs must be checked again before being unchecked ? — Jack Reilly, Oct 16 '17 at 10:41
No idea - I assume you must have some javascript causing that issue — , Oct 16 '17 at 10:43
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/156820/discussion-between-stephen-muecke-and-jack-reilly). — , Oct 16 '17 at 10:56

score 0 · Answer 1 · answered Oct 18 '17 at 21:51

I resolved the issue. I had to re-apply the current "active" state of the bootstrap button.

 <div class="btn-group" data-toggle="buttons">
       <label class="btn btn-primary checkboxes">
        <span class="glyphicon glyphicon-unchecked large-glyphicon"></span>
            - @Html.CheckBoxFor(m => m.Equipment[i].Checked, new {@class= "assetCheckBox" })
       </label>
 </div>

And on page load

$(function () {
$('.checkboxes').each(function () {
    var checkbox = $(this).children('input[type=checkbox]');
    if (checkbox.is(':checked')) {
        checkbox.parent().addClass("active");
    } else {    
        checkbox.parent().removeClass("active");
}

}); });

The reason no one was able to help me is I hadn't included enough code in my question.

CheckBoxFor, when I reload the page I can check already checked checkboxes

1 Answers1