Question

如果复选框ID =＆＃34; check1＆＃34;我试图阻止表单提交并触发跨度错误出现在提交上被选中。

<form name="form1" method="post" action="">
    <span id="group">
        <input type="checkbox" name="check1" id="check1" value="1">
        <label>check1</label> <br>
        <input type="checkbox" name="check2" id="check2" value="2">
        <label>check2</label> <br>
        <input type="checkbox" name="check3" id="check3" value="3">
        <label>check3</label> <br>
        <input type="checkbox" name="check4" id="check4" value="4">
        <label>check4</label> <br>

        <span class="error">One or more of your selection is wrong.</span>
    </span>
    <input name="submit" type="submit" value="submit">
</form>

Answer 1

首先将你的提交按钮设置为按钮类型，并在按钮的onclick事件上调用一个javascript函数，如下所示 -

<input name="submit" type="button" value="submit" onclick="validateSubmission()">

// javascript function
<script type="text/javascript">
    function validateSubmission()
    {
      var checkboxSelected = document.getElementById('check1').checked;
      if(checkboxSelected)
     {
       // show your span error alert 
     }
      else
    {
      // submit your form here like below
      var forms = document.getElementsByName('form1');
      forms[0].submit();
     }
    }
</script>

Answer 2

使用jQuery，

JS：

$('input[name="submit"]').on('click', function(e){
    if( $('input#check1').is(":checked") ){
        e.preventDefault();
        $('span.error').removeClass("hide");
    }   
});

HTML：

<span class="error hide">One or more of your selection is wrong.</span>

CSS：

   .hide{
       display: none;
   }

请参阅以下工作代码：

JSFiddle

如果从复选框组中选择了特定复选框，则提交时触发错误

2 个答案: