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创建隐藏的输入元素时，我使用this脚本将隐藏元素移动到父级的底部。当复选框不在模态内时，脚本可以正常工作：

$(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
 });

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

1 个答案: