Question

我有一个带有一堆复选框和输入字段的表单。我正在使用jquery（1.10.1）根据页面上另一个表单的用户输入来操作表单的许多内容。几周前这一切都在运行，但突然之间我发现没有一个复选框在被jquery更改后提交。

复选框的格式为：

<input type="checkbox" id="prod_70" name="prod[70]" class="product style_1 color_1 lens_3 status_1 " value="1" checked />

我的Jquery代码看起来是另一种形式来决定用户感兴趣的哪些框，然后根据该框创建一个选择器，并选中分配给复选框的类来检查用户请求的框：

$(curSel).prop('checked',true);

我正在使用：

$(curSel).attr('checked','checked').prop('checked',true);

但是因为这不应该是必要的。我也尝试添加.change（）以获得良好的衡量标准，但这并没有解决问题所以我把它取回了。

当我提交表单时，没有任何选中的复选框显示，$ _POST ['prod']（后端的PHP）不存在。 $ _REQUEST ['prod']也不存在。表单上的其他字段正在提交。如果我在不让jquery更新任何内容的情况下提交表单，那么复选框会提交并且$ _POST ['prod']正如预期的那样。

我在firefox中使用了Chrome和firebug中的控制台，在与页面交互时检查复选框，并且正在添加和删除“已检查”，并且复选框即使在他们没有提交时也能正确显示。

我已经检查了页面上的HTML以确保一切都是有效的，并且没有任何遗漏的关闭标签或嵌套标签，页面上唯一的其他JS用于FB的按钮和twitters按钮。

我对可能造成这种情况的原因感到茫然，而且我的搜索不再是类似的东西了。

编辑添加更多内容：

经过更多调试后，似乎问题不在于更改复选框。当复选框所在的<li>被.hide（）隐藏，然后以.show（）重新显示时，就会发生这种情况。执行此操作后，<li>中的复选框永远不会提交，即使<li>中的其他表单元素也是如此。这是一个完整的<li>：

<li class="prod style_1 color_1 lens_7 status_1  bulk-list-item" id="prod_55">
    <div class="bulk-prod-name">
        <input type="checkbox" id="prod_55" name="prod[55]" class="product style_1 color_1 lens_7 status_1 " value="1" />
        <label for="prod_55">
            <span class="style-name">Player</span>
            <span class="color-name">Matte Black</span> |
            <span class="lens-name">Rose Hi-Def LTD 17/35</span>
            &nbsp;&nbsp;
            <span class="part-number">PLMBHD03</span>
            <div style="margin-top:10px;">
                <span class="bulk-prod-status">Status: <b>In Stock</b></span>
            </div>
        </label>
    </div>
    <div class="bulk-prod-image">
        <div style="position:absolute; top:0;"><img style="width:100%;" src="/art/products/11/1/frame/thumb/1.png"></div>
        <div style="position:absolute; top:0;"><img style="width:100%;" src="/art/products/11/1/lens/thumb/7.png"></div>
        <div style="clear:both;"></div>
    </div>
    <div class="bulk-prod-price">
        MSRP: $ <input type="text" id="prod_msrp_55" name="prod_msrp[55]" class="msrp inputbox" value="179.00" prod_id="55">
        <input type="hidden" id="prod_msrp_orig_55" class="orig_price" value="179.00" orig_id="prod_msrp_55">
        &nbsp;&nbsp;&nbsp;
        Dealer Price: $ <input type="text" id="prod_dprice_55" name="prod_dprice[55]" class="dprice inputbox" value="90.00" prod_id="55">
        <input type="hidden" id="prod_dprice_orig_55" class="orig_price" value="90.00" orig_id="prod_dprice_55">
    </div>
    <div class="bulk-prod-edit">
        <a href="/admin/add_product.html?product[prod_id]=55&product[is_edit]=1">Edit</a> this product.
        <div style="display:none" id="files_55">
            <table width=100%>
                <tr>
                    <td width=50% valign=top><small>Fullsize:<br>
                        <span style="color:#009900"> /art/products/11/1/frame/full/1.png</span><br>
                        <span style="color:#009900"> /art/products/11/1/lens/full/7.png</span><br>
                        </small>
                    </td>
                    <td width=50% valign=top><small>Thumbnais:<br>
                        <span style="color:#009900"> /art/products/11/1/frame/thumb/1.png</span><br>
                        <span style="color:#009900"> /art/products/11/1/lens/thumb/7.png</span><br>
                        </small>
                    </td>
                    </tr>
            </table>
        </div>
    </div>
</li>

这是隐藏/显示/检查/取消检查事物的完整jQuery：

    $(document).on('change', '.prod_selector', function(e) {
//      console.log('Selection changed:');
        e.preventDefault();
        $('.prod').hide();
        $('.product').prop('checked', false);
        var lens = $('#lens_selector').val();
        var color = $('#color_selector').val();
        var style = $('#style_selector').val();
        var pstatus = $('#status_selector').val();
        var curSel = '';

        if (lens>0) {
            curSel += '.lens_' + lens;
        }
        if (color>0) {
            curSel += '.color_' + color;
        }
        if (style>0) {
            curSel += '.style_' + style;
        }
        if (pstatus>0) {
            curSel += '.status_' + pstatus;
        }


        if ((lens==0) && (color==0) && (style==0) && (pstatus==0)) {
            curSel = '.prod';
            $('.product').prop('checked',true);
        }

//      console.log('curSel: ' + curSel);
        $(curSel).show()
        $(curSel).prop('checked',true);
        $('#prod_count').text($('.prod:visible').length);
    });

在搞乱事情之后，我确定如果我没有.hide（）任何东西，那么它都按预期工作（除了不隐藏需要隐藏的东西）但是如果有<li>的话即使其他输入字段确实存在，即使它们内部再次显示的复选框也没有被包含在表单提交中，所以它们是隐藏的。

Answer 1

我看到一个分号缺失：

$(curSel).show()
$(curSel).prop('checked',true);

缺少的分号可以阻止第二个语句将任何复选框设置为已选中。

Answer 2

问题解决了。原来我问的是错误的问题。经过更多测试后，我终于确定它不是导致问题的jquery。

问题是该页面管理的数据库中添加了更多项目，这些项目向表单添加了更多字段，我们在php配置中达到了max_input_vars限制。我发现这可能导致问题：Limit of POST arguments in html or php

我为此网站提出了max_input_vars，现在表格又重新开始了。

使用jquery更改后，复选框不提交

2 个答案: