jQuery，阻止表单提交，然后继续

Question

我有一个带有 2 个单选按钮和一个复选框的简单表单。复选框取决于单选按钮。意思是，如果 id="rd1" 的单选按钮被选中，则复选框也应该被 selected，否则不应提交表单。如果id="rd0"的单选按钮被勾选，则可以提交表单。

它是这样写的：

<form>
<input type="radio" name="rd" value="0" id="rd0" required="required" />
<input type="radio" name="rd" value="1" id="rd1" required="required" />

<input type="checkbox" name="ckbx" value="sample_value" id="ck" />

<button type="submit" name="send" id="sbmt" >Submit Me!</button>
</form>

所以，现在我已经使用 jQuery 编写并测试了 2 段代码，但每段代码的功能都不同。

第一个：

$('#sbmt').click(function(event){
        event.preventDefault();
        if($('#rd1').is(':checked') && $('#ck:checked').length == 0){
            alert('You didn't select the checkbox! /facepalm ');
        }else{
            $('form').submit();
        }
    });

这段代码，反正就是提交表单！如果我没有 select 任何单选按钮，它甚至不会触发 required 属性的浏览器警报。

现在，第二段代码：

$('form').submit(function(event){
        event.preventDefault();
        if($('#rd1').is(':checked') && $('#ck:checked').length == 0){
            alert('You didn't select the checkbox! /facepalm ');
        }else{
            $('form').submit();
        }
    });

另一方面，这表明当 if 条件为真时警报完美。但它不会在不提交表单时提交。不用说单选按钮的 required 属性在这里工作得很好。

100% 感谢您的帮助。谢谢

Answer 1

我认为你对 event.preventDefault() 有误。

$('form').submit(function(event){
        if($('#rd1').is(':checked') && $('#ck:checked').length == 0){
            event.preventDefault(); // prevent only when condition is true, otherwise submit
            alert('You didn't select the checkbox! /facepalm ');
        }
});

jQuery，阻止表单提交，然后继续

jQuery, prevent form from submitting, then continue

jquery

forms

submit