Question

    <input type="checkbox" value="On" name="policy" id="policy"></font>
    <b><font face="Verdana" color="#ff0000" size="1">*</font></b>By checking the box, you are verifying with your digital signature that you have read and agree to all terms and conditions of the <a href="Anico_2013-08-26.pdf" target="_blank">FEG agent agreement</a>.
  </td>
</tr>
<tr class="gr">
  <td class="rowdot_lno">Do you agree?:</td>
  <td class="rowdot_lno">
    <input type="checkbox" value="On" name="iagree" id="iagree">
    <b><font face="Verdana" color="#ff0000" size="1">*</font></b>I understand that I will be charged $24.95.
  </td>
</tr>

I have a <form method="post" action="enroller.dhtml" name="mainform" onSubmit="update_prices()"> and a button <input type="submit" value="Continue">

I've tried a few things but to no avail. The form can be submitted without the checkboxes being checked. Here's the latest bit of jQuery I've tried.

$('input[type=checkbox]').each(function () {
        if($(this).is(':checked')) {
            return true;
        }
    });
    alert("Please select at least one to upgrade.");
    return false;
});

Also I found this on fiddle but it's not really working.. I tried to customize it to my needs.

http://jsfiddle.net/shryme/D3Ldj/

No correct solution

OTHER TIPS

If you have an onSubmit on your submit button or add it though jquery, call a function which would :

if ($('input[type=checkbox] :checked').length == 0) {
    alert("Please select at least one to upgrade.");
    return false;
} else { return true; }

I hope this is what you are looking for.

From this line:

Please select at least one to upgrade

It seems that you need at least one checkbox checked. If that is the case, you could do something like this:

$("form").submit(function(){
    var length = $("input[type=checkbox]").not(":checked").length;
    if (length > 1) {
        alert("Please select at least one to upgrade.");
        return false;
    }
});

Which checks to see how many checkboxes are not checked, determines if that number is less than the required number, and if it is, triggers the error message.

You can also further simplify the length variable if you are comfortable with CSS selectors:

var length = $("input[type=checkbox]:not(:checked)").length;

Here's an example.

I would suggest to do it with some MVVM framework but here's some code to do it with jQuery. I made it so that the submit button is disabled unless both boxes are checked.

Fiddle with 2 checkboxes and a submit button

function areChecked(){
   var is_1_checked = $('#check_1').is(':checked');  
   var is_2_checked = $('#check_2').is(':checked');

   return is_1_checked == is_2_checked == true;
}

function enableButton(val){
    $('#submit').attr('disabled', false);
}

$('#check_1').on('click', function(){
    if (areChecked())
     enableButton(false);
});

$('#check_2').on('click', function(){
   if (areChecked())
     enableButton(false);
}); 
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top