Jquery for checkbox doesn't work for model popup

Question

In ModalPopupExtender control I have a checkbox. Once the checkbox is checked, I want the Submit button in the popup to be enabled or else be disabled.

 <asp:CheckBox ID="chkUser" TabIndex="0" runat="server" CssClass="cCheckBox" ClientIDMode="Static" onchange="Checked();"/>

  src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type = "text/javascript"> function Checked() { if(document.getElementById('<%=chkUser.ClientID%>').checked) { document.getElementById('<%=btnSubmit.ClientID%>').EnableSubmitButton = true; } } </script> 

I'm getting the following error.

0x800a1391 - JavaScript runtime error: Checked undefined error.

Answer 1

Move this code to the end of body tag

<script type = "text/javascript">

  function Checked() {
    if(document.getElementById('<%=chkUser.ClientID%>').checked) {
      document.getElementById('<%=btnSubmit.ClientID%>').disabled = true;
    }
  }
</script>

Also you may need to handle checkbox change event.

document.getElementById('<%=chkUser.ClientID%>').onchange = Checked;

Answer 2

Change on click to onchange="Checked(this);" .

<asp:CheckBox  onchange="Checked(this);" ID="chkUser" TabIndex="0" runat="server" CssClass="cCheckBox" ClientIDMode="Static"/>

<script type="text/javascript">
    function Checked(ele) {
        document.getElementById('<%=btnSubmit.ClientID%>').disabled = !ele.checked;
    }
</script>

Answer 3

You can use jquery ' change ' event delegation on the checkbox and use it's property checked to determine if to disable the button or not.

$().ready(function(){
      $('#<%=chkUser.ClientID%>').on('change',function(){           
       $('#<%=btnSubmit.ClientID%>').prop("disabled",!$(this).prop("checked"));
      });
});

Example : https://jsfiddle.net/DinoMyte/h712mu20/2/