MaterializeCSS - ASP。 Net MVC：模式中的复选框

Question

我希望有人能帮我解决以下问题：我在一个带有多个复选框的模式中有一个表单。

cshtml 看起来像这样：

<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>

由于 @Html.Checkbox 创建了一个隐藏的输入元素，我使用脚本将隐藏元素移动到父元素的底部。当复选框不在模式内时，该脚本可以完美运行：

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

但是当复选框在模式中时，我得到这个 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>

在模态之外我会得到（这有效）：

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

因此标签以某种方式被推到了顶部。当我在模式的输入之间手动（从开发人员工具）移动标签时，我看到了复选框，但我无法单击它。有人可以帮我吗？

Answer 1

以防万一其他人遇到这个问题 - 这是我的解决方案：我在打开模式的回调函数中使用它：

 $('.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：模式中的复选框

MaterializeCSS - ASP. Net MVC: Checkbox in modal

javascript

css

asp.net

materialize

razor