用jquery更改后复选框未提交答案

【问题标题】：Checkboxes not submitting after being changed with jquery用jquery更改后复选框未提交
【发布时间】：2014-04-06 11:45:59
【问题描述】：

我有一个带有一堆复选框和输入字段的表单。我正在使用 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'] 符合预期。

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

我已经检查了页面上的 HTML 以确保所有内容都有效并且没有任何丢失的关闭标签或嵌套标签，并且页面上唯一的其他 JS 用于 FB 的点赞按钮和 Twitter 的关注按钮。

我不知道是什么原因造成的，而且我的搜索不再出现类似的东西。

编辑以添加更多内容：

经过更多调试后，问题似乎不在于更改复选框。当复选框所在的<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> 被隐藏然后即使它们再次显示其中的复选框也不会包含在表单提交中，即使其他输入字段也包含在内。

【问题讨论】：

检查您的版本控制日志，看看您在它停止工作时所做的更改。
您确定复选框在表单内吗？
stackoverflow.com/questions/3029870/…
curSel 是基于用户在页面上以其他形式输入的“当前选择器”。复选框正在更改，但即使它们被选中（通过 jquery 或手动），它们也不会在 jquery 触摸它们后提交。
在页面工作和停止工作之间没有对页面进行任何更改。这是最让我摸不着头脑的地方。 jquery 是从谷歌 CDN 加载的，所以我不能保证那里没有任何变化，但它不应该有。是的，我已经两次（和三次）检查了表单中的复选框 - 如果我提交页面而不触发任何 jquery 更改，它们会提交。

标签： javascript php jquery html forms

【解决方案1】：

我看到一个分号不见了：

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

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

【讨论】：

好收获！不敢相信我看了这么久就错过了。但这并没有引起问题。我刚刚解决了这个问题并发布了答案，结果发现根本不是我最初认为的那样。

【解决方案2】：

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

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

我为这个网站提高了 max_input_vars，现在表单又可以工作了。

【讨论】：