Checkbox is always returning false even when checked

Question

ASP.NET 4.51 WebForms, jQuery 2.0.3

<div class="row">
  <div class="col-xs-3 col-sm-3 col-md-3">
    <div class="checkbox">
      <label>
        <asp:CheckBox ClientIDMode="Static" ID="chkAgree" runat="server" />I Agree
      </label>
    </div>      
    <br/>
    <asp:CustomValidator ID="cfvAgree" runat="server" ValidationGroup="Default" ErrorMessage="Agree to terms and conditions." ClientValidationFunction="CheckTermsAndConditions" CssClass="label label-danger"></asp:CustomValidator>
  </div>

and the java script:

<script type="text/javascript">
    function CheckTermsAndConditions(aSource, aArgs) {

        if ($('#checkbox').prop('checked')) {
            console.log("true");
            aArgs.IsValid = true;
        } else {
            console.log("false");
            aArgs.IsValid = false;
        }

    }

</script>

The issue is that even if the checkbox is checked it always returns false. I am sure I am missing something obvious here, but what is it?

Answer 1

There's nothing on your page with the id of checkbox , so I'm pretty sure your selector is wrong. It should be #chkAgree

Answer 2

Shouldn't it be

if ($('#chkAgree').prop('checked')) 

?

Answer 3

If there is only single check box in your page you can try:

if ($("input:checkbox").prop('checked')) 

other wise your selector is wrong.Give proper ID for selection.