0

对于我正在构建的表单，我使用 jQuery UI 对话框为用户提供大约 50 个复选框选项的列表。将文本框添加到对话框时，它们会从表单中完全删除，因此我必须在提交之前将它们克隆并重新插入到表单中，以便所有复选框值都将与表单一起提交。问题是复选框在添加回表单时会明显出现。我只是想让它们不可见并且仍然能够提交值。

我想也许做类似 prepend() 的事情可能是一个解决方案，这样用户实际上不会看到复选框，一直在表单的底部——但它仍然将表单元素向下推。因此，我正在寻找一种将 附加#states_container :input到表单而不会以任何方式明显影响表单的方法。

代码：

    $('#submit_btn').click(function(e){

        $("#form_submission").validate({});

        if ($("#form_submission").valid()) {
            $("#form_submission").append($('#states_container :input').clone());
            $("form#form_submission").submit();
       } else {
            e.preventDefault();
            alert("Please make sure all required information has been provided before submission.")
       }

   });
4

1 回答 1

1

div在表单底部创建一个。将它的显示样式设置为 none 并给它一个唯一的 id。

<div id="checkBoxes" style="display:none;"></div>

当您从 jQuery 对话框克隆复选框时，将它们的位置设置为：

document.getElementById("checkBoxes").innerHTML = varWithCheckBoxes;

这会将您的所有复选框放在一个不可见的 div 中，这不会影响您的布局，并且仍将与您的表单一起提交。此外，如果需要重新填充该复选框列表以进行更改，您可以简单地从 div 中获取它们并将它们放回对话框中。

于 2013-09-27T18:16:50.750 回答