MaterializeCSS - ASP. Net MVC: Checkbox in modal

Question

I hope somebody can help me with the following problem: I have a form inside a modal with several checkboxes.

The cshtml looks like this:

<div id="modal1" class="modal">
    <div class="modal-content">
        <form>
            <p>
                @Html.CheckboxFor(x => x.CheckValue, new {@type = checkbox})
                @Html.LabelFor(x => x.CheckValue)
            </p>
        </form>    
    </div>
</div>

As @Html.Checkbox creates a hidden input element I use this script to move the hidden element to the bottom of the parent. The script works perfectly when the checkbox is not inside the modal:

$(document).ready(function () {
    $('input:hidden').each(function (index, element) {
        $(element).appendTo($(element).parent());
    });
});

But when the checkbox is inside a modal I get this html:

<div>
    <label for="CheckValue">CheckValue:</label>
    <input id="CheckValue" name="CheckValue" type="checkbox" value="true">
    <input id="CheckValue" type="hidden" value="false" >
    ::after::
</div>

Outside of the modal I would get (this works):

<div>
    <input id="CheckValue" name="CheckValue" type="checkbox" value="true">
    <label for="CheckValue">CheckValue:</label>    
    <input id="CheckValue" type="hidden" value="false" >
</div>

So somehow the label is pushed to the top. When I move the label manually (from developer tools) between the inputs in the modal I get to see the checkbox but I can't click it. Can someone help me here?

score 2 · Accepted Answer · answered Jun 09 '16 at 16:24

Just in case anybody else runs into this problem - here is my solution: I use this in the callback function for modal opened:

 $('.modal-trigger').leanModal({
         ready: function () {
                 //moves the hidden input to the bottom of the parent element
                 $('input:hidden').each(function (index, element) {
                     $(element).appendTo($(element).parent());
                 });
         } // Callback for Modal open
 });

MaterializeCSS - ASP. Net MVC: Checkbox in modal

1 Answers1