0

当使用 JQuery 动态创建复选框数组并附加到 DOM 元素时，IE 8 不会将复选框数组作为表单的一部分提交。它与 Firefox 和 Chrome 完美配合。我在服务器端使用 MVC 3 框架。有什么想法可以解决这个问题以使其与 IE 8 一起使用？我绝对会感谢任何建议。

模型：

public int[] SelectedTemplateRequirements { get; set; }

看法：

HTML：

<label for="requirementsTemplateDetail">Requirements:</label><br />
<div id="requirementsTemplateDetail"></div>

查询：

<script type="text/javascript">
    /* Fills up the textarea */
    function fillTextArea(ctrlName, list) {
        // clear div
        $('#requirementsTemplateDetail').empty();

        $.each( list, function (index, itemData) {
            // alert(itemData.Id );
            $(ctrlName).append(
                $(document.createElement('input')).attr({
                    name: 'SelectedTemplateRequirements',
                    value: itemData.Id,
                    type:  'checkbox',
                    checked: 'checked'
                })
            ).append(itemData.Name + '<br/><br/>');
        })
    }

  function fillRequirementsDropdown(response) {
    fillTextArea("#requirementsTemplateDetail", response.Reqs);
  }

function postFormRequirementsByTemplateID(ctrlName) {
    var theForm = $(ctrlName).parents('form');

    $.ajax({
        type: "POST",
        url: '@Url.Action("GetRequirementsByTemplateID")',
        data: theForm.serialize(), 
        error: function (xhr, status, err) {
            alert("An error occurred while saving\n\n" + err);
        },
        success: function (response) {
            fillRequirementsDropdown(response);
        }
    });
    return false;
}

function auditType_SelectionChanged() {
    postFormRequirementsByTemplateID("#AuditTemplateId");
}

$(document).ready(function () {
    $("#ClassTypeId").change(function () {
        ClassType_SelectionChanged();
    });
    $("#AuditTemplateId").change(function () {
        auditType_SelectionChanged();
    });
    $('#templateSearchID').click(function () {
        auditTemplateButtonPressed();
    });
    $('#templateAllID').click(function () {
        auditTemplateAllPressed();
    });
});

</script>

控制器：

public class AuditController : ComplianceController
{
    [HttpPost]
    public ActionResult Create(string submit, AuditDocument document )
    {
            // Inserts into AuditRequirementDetail table
            m_activeContract.insertAuditTemplateRequirements(document, myuser);
    }
}

发生的情况是 IE 8 无法捆绑SelectedTemplateRequirements数组，因为它显示为NULL当它返回到控制器上的 post 操作方法时。由于 IE 8 仍然拥有庞大的用户群，因此非常感谢您对此提出任何建议。

4

1 回答 1

1

我认为问题可能在于您创建复选框并将其附加到 DOM 元素的方式。

例如，假设您有以下代码：

// Append an input element built from a single string
for (var i = 0; i < 10; i++) {
    $('<input type="checkbox" name="test" value="' + i + '" checked="checked" />').appendTo('#form1');
}

// Append an input element build using DOM and jQuery attribute manipulation
for (var i = 0; i < 10; i++) {
    $(document.createElement('input')).attr({
        name: 'test',
        value: i,
        type: 'checkbox',
        checked: 'checked'
    }).appendTo('#form2');
}

alert($('#form1').serialize());
alert($('#form2').serialize());

如果您alert()在 Chrome 或 Firefox 中检查结果，您将从#form1：

test=0&test=1&test=2&test=3&test=4&test=5&test=6&test=7&test=8&test=9

这来自#form2：

test=0&test=1&test=2&test=3&test=4&test=5&test=6&test=7&test=8&test=9

它们是相同的，并且支持您在 Chrome 和 Firefox 中具有预期行为的结果。但是，IE 的行为并不相同。IE8 和 IE9 中的相同代码从以下位置生成#form1：

test=0&test=1&test=2&test=3&test=4&test=5&test=6&test=7&test=8&test=9

这来自#form2：

test=on&test=on&test=on&test=on&test=on&test=on&test=on&test=on&test=on&test=on

通过对您的代码的简短检查，我会质疑您用于动态创建复选框并将其附加到您的 DOM 元素的方法。我不知道 MVC 如何处理每个 POST 变量都相同的情况，但这可能是您问题的一部分。

附加复选框的另一种跨浏览器方式：

for (var i = 0; i < 10; i++) {
    $('<input type="checkbox" />').attr({
        name: 'test',
        value: i
    }).prop('checked', true).appendTo('#form3');
}

您需要确保在添加属性之前指定类型。此外，正确设置“checked”属性对于 jQuery 序列化 IE 中复选框的值而不是状态至关重要。

上面的JSFiddle。

于 2012-05-30T06:08:14.900 回答