html - 仅当至少选中一个复选框时才使用外部提交按钮提交表单

Question

我正在制作一个添加到购物车的程序，但我想将特定产品添加到购物车，其中包含他们选择的属性，例如尺寸和颜色。由于我的提交按钮不在表单内，只有在尺寸表单中至少选中一个复选框时，我才需要使用 Jquery 提交表单，否则单击购物车按钮时它应该显示 div #tipdivcontent .我不明白我哪里出错了。

已更新 FIDDLE 链接，因为插入了错误的链接

下面给出了代码片段和 JSFIDDLE

$(document).ready(function () {
    $('.cartorcheckoutbutton').click(function () {
        var $form = $('#sizesform');
        var $checkbox = $('.roomselect');

        $form.on('submit', function (e) {
            if (!$checkbox.is(':checked')) {
                $('#tipdivcontent').css("display", "block");
                e.preventDefault();
            }
        });
    });
});

#tipdivcontent
{
    display:none;
}

<input type="submit" value="Cart" class="cartorcheckoutbutton">
<form action="../cart" method="POST" id="sizesform">
    <table border="1" cellspacing="0">
        <tr>
            <th colspan="4">Sizes</th>
        </tr>
        <tr>
            <td>
                <label for="2.2">2.2</label>
            </td>
            <td>
                <input class="roomselect" type="checkbox" id="2.2" name="size" value="twopointtwo">
            </td>
            <td>
                <label for="2.4">2.4</label>
            </td>
            <td>
                <input class="roomselect" type="checkbox" id="2.4" name="size" value="twopointfour">
            </td>
        </tr>
        <tr>
            <td>
                <label for="2.6">2.6</label>
            </td>
            <td>
                <input class="roomselect" type="checkbox" id="2.6" name="size" value="twopointsix">
            </td>
            <td>
                <label for="2.8">2.8</label>
            </td>
            <td>
                <input class="roomselect" type="checkbox" id="2.8" name="size" value="twopointeight">
            </td>
        </tr>
        <tr>
            <td colspan="3" align="center">
            <label for="2.10">2.10</label>
            </td>
            <td>
                <input class="roomselect" type="checkbox" id="2.10" name="size" value="twopointten">
            </td>
        </tr>
    </table>
</form>
<div id="tipdivcontent">Please Select Size.</div>

Answer 1

尝试像这样提交您的表单。

我们也可以通过这种方式触发表单的提交事件。

$(document).ready(function () {
            $('.cartorcheckoutbutton').click(function (e) {
                var $form = $('#sizesform');
                var $checkbox = $('.roomselect');
                if (!$checkbox.is(':checked')) {
                    alert('Please confirm!');
                    $('#tipdivcontent').css("display", "block");
                    e.preventDefault();
                }
                else
                    $form.submit();
                
            });            
        });

#tipdivcontent
{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="submit" value="Cart" class="cartorcheckoutbutton">
<form action="../cart" method="POST" id="sizesform">
    <table border="1" cellspacing="0">
        <tr>
            <th colspan="4">Sizes</th>
        </tr>
        <tr>
            <td>
                <label for="2.2">2.2</label>
            </td>
            <td>
                <input class="roomselect" type="checkbox" id="2.2" name="size" value="twopointtwo">
            </td>
            <td>
                <label for="2.4">2.4</label>
            </td>
            <td>
                <input class="roomselect" type="checkbox" id="2.4" name="size" value="twopointfour">
            </td>
        </tr>
        <tr>
            <td>
                <label for="2.6">2.6</label>
            </td>
            <td>
                <input class="roomselect" type="checkbox" id="2.6" name="size" value="twopointsix">
            </td>
            <td>
                <label for="2.8">2.8</label>
            </td>
            <td>
                <input class="roomselect" type="checkbox" id="2.8" name="size" value="twopointeight">
            </td>
        </tr>
        <tr>
            <td colspan="3" align="center">
                <label for="2.10">2.10</label>
            </td>
            <td>
                <input class="roomselect" type="checkbox" id="2.10" name="size" value="twopointten">
            </td>
        </tr>
    </table>
</form>
<div id="tipdivcontent">Please Select Size.</div>