javascript - 使用 jquery 更改后复选框未提交

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'] 符合预期。

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

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

我不知道是什么原因造成的，而且我的搜索也没有找到任何类似的东西。

编辑以添加更多内容:

经过更多调试后，问题似乎不在于更改复选框。当 <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);

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