I have multiple checkbox and one of them had to be checked. Everything is running fine for the first time when clicking submit the "flag" is true and the preventDefault() working.
But "unbind" not working if "flag" is false.
Also the form should not be submited if other required fields are not filled.
<form action="submit/submitPref.php" method="post" onSubmit="return myvalidate()">
<div class="section mt">
<p class="my_comp">My Compensation Package can be</p>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
<div class="section pre_btm compn">
<div class="col-xs-6 pr-none half pl0 mrgrht">
<p>Salary Only per Year</p>
<input name="salOnlyPY" type="checkbox" class="chk txtrht" value="1">
</div>
<div class="col-xs-6 pr-none half pl0 mrgrht">
<p>Salary Only per Hour</p>
<input name="salOnlyPH" type="checkbox" class="chk txtrht" value="1">
</div>
<div class="col-xs-6 pr-none half pl0 mrgrht">
<p>Salary with Bonus</p>
<input name="salWithBonus" type="checkbox" class="chk txtrht" value="1" />
</div>
<div class="col-xs-6 pr-none half pl0 mrgrht">
<p>Commission Only</p>
<input name="commOnly" type="checkbox" class="chk txtrht" value="1">
</div>
<div class="col-xs-6 pr-none half pl0 mrgrht">
<p>Salary & Commission</p>
<input name="salNcomm" type="checkbox" class="chk txtrht" value="1">
</div>
<div class="clearfix"> </div>
</div>
<!--THE FORM ALSO HAS OTHER MANDATORY FIELDS-->
</form>
$(document).ready(function(){ function myvalidate() { flag=true; $('.txtrht:checked').each(function(){ flag=false; }); if(flag){ $('.my_comp').addClass('required'); $("form").submit(function(e){ e.preventDefault(); }); } else { if($('.my_comp').hasClass('required')) { $('.my_comp').removeClass('required'); } $("form").submit(function(e){ e.preventDefault(); $(this).unbind('submit').submit(); }); } } });