I noticed that @Html.CheckboxFor(model => model.MyCheckBox) creates a hidden input with the same name as the actual checkbox. So when you dynamically add a checkbox, make sure you also add in a hidden input with the same name attribute.
var chkboxDiv = $(document.createElement('div')).attr({
id: 'dynamicChkBoxdiv_'
});
chkboxDiv.html(
'<input ' +
'class="myChkBx"' +
'type="checkbox"' +
'value=""' +
'data-val-required="The Active field is required."' +
'data-val="true"' +
'name="myChkBxName"/>' +
'<input ' +
'type="hidden"' +
'value=""' +
'name="myChkBxName"/>' +
);
You also need to add a click event handler to update the hidden value so when the form is submitted, the controller will get the correct ‘checked’ value.
Notice the second parameter that specifies a css class. When you add your dynamic controls, add a css class so you can specify which elements should get the click event delegate. All of your dynamically added controls that have the css class, will now have the same click event.
$("#dynamicChkBoxdiv_").parent().on("click", '.myChkBx', function (e) {
var name = e.target.name;
var checkVal = e.target.checked;
$("input[name^='" + name + "']").val(checkVal); //this will update both the checkbox and hidden input's value
});