Question

我有一个带有2个单选按钮和一个复选框的简单表单。该复选框取决于单选按钮。这意味着，如果选中id =“ rd1”单选按钮，则也应选中该复选框，否则不应提交表单。如果选中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();
        }
    });

这段代码，还是要提交表单！如果我没有选择任何单选按钮，则它甚至都不会触发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条件为true时，这完美地显示了警报。但如果不是，它将不会提交表单。不用说，单选按钮的required属性在这里可以正常工作。

我们非常感谢您的帮助。谢谢

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，阻止表单提交，然后继续

1 个答案: