Simple Javascript function is not working on .ascx file

I am trying to make a simple javascript function work in the .ascx file in my asp.net and vb.net application. I have included the following html code inside the asp panel tag.

                    <div class="inline" >

                     <asp:CheckBox ID="tick" runat="server" Text="Please tick the box to confirm the above information are correct" Checked="false" CssClass="small" onchange="EnableSubmit()" />
                </div>

and the following javascript code in the .ascx file

<script type="text/javascript">
function EnableSubmit() {

    if (document.getElementById("tick").checked == true) {


        document.getElementById("uxSubmit").enabled = true;
    }
    else {
        document.getElementById("uxSubmit").enabled = false;
    }


}

As you can see from the code I am trying to include a checkbox. And the user has to tick the check box to make submit button active. But the function is not working. whenever i tick the check box a white box (like a popoup ) appears in front of the screen.

I have tried the answer given in this link but in that way my whole form became invisible. How to use javascript in .ascx pages

I appreciate your kind suggestion and help.

Thank you

The full code in the .ascx file is given below.Please let me know if you need more information.

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="CandidateRegistration3.ascx.vb"
Inherits="_controls_CandidateRegistration3" %>

<asp:CustomValidator ID="uxProfileCVValReq" runat="server" EnableViewState="false"
ErrorMessage="You create a 'Personal Profile' or upload a Word Compatible or PDF 'Curriculum Vitae'."
ValidationGroup="candidateregistration" Display="None" />

<div style="margin-bottom: 20px;">
<asp:Panel ID="panUpload" runat="server">
    <asp:CustomValidator ID="CustomValidator1" runat="server" EnableViewState="false"
        ErrorMessage="You must upload a Word Compatible or PDF 'Curriculum Vitae'." Display="None"
        ValidationGroup="CVUpload" />
    <p>Your registration form will be populated from the details contained in your CV or application form, please upload now.</p>
    <asp:FileUpload ID="txtFilePath" runat="server" CssClass="" ValidationGroup="CVUpload" />

    <asp:HiddenField ID="hdDocId" runat="server" />
</asp:Panel>
<asp:Panel ID="panForm" runat="server" Visible="false">

    <table class="table table-bordered">

        <tr>
            <td><label>Email Address</label></td>
            <td>
                <asp:TextBox ID="uxEmail" runat="server" CssClass="" MaxLength="100"
                    EnableViewState="False" />

            </td>
        </tr>
        <tr>
            <td><label>Password</label></td>
            <td>
                <asp:TextBox ID="uxPassword" runat="server" CssClass="" MaxLength="20"
                    EnableViewState="False" TextMode="Password" />
            </td>
        </tr>
        <tr>
            <td><label>Confirm Password </label></td>
            <td>
                <asp:TextBox ID="uxPasswordConfirm" runat="server" CssClass="" TextMode="Password" />
            </td>
        </tr>
    </table>

    <asp:CustomValidator ID="uxCVFileTypeReq" runat="server" EnableViewState="false"
        ErrorMessage="You must upload a Word Compatible or PDF 'Curriculum Vitae'." Display="None"
        ValidationGroup="CVUpload" />
    <asp:HiddenField ID="uxCVID" runat="server" EnableViewState="false" />

    <p>To complete your registration please click Next.</p>

    <div class="inline" >

         <asp:CheckBox ID="tick" runat="server" Text="Please tick the box to confirm the above information are correct" Checked="false" CssClass="small" onchange="EnableSubmit()" />

    </div>

</asp:Panel>
</div>

    <p class="">
       <asp:LinkButton runat="server" ID="uxSubmit" Text="Next" OnClick="SaveClick" CausesValidation="true" ValidationGroup="candidateregistration" CssClass="button2" Enabled="false"  />

       <a href="#" onclick="parent.$.colorbox.close()" class="button2">Cancel</a>
       <asp:LinkButton runat="server" ID="uxUpload" Text="Upload" CssClass="button2" CausesValidation="true" ValidationGroup="CVUpload" /> </p>


<script type="text/javascript">
   function EnableSubmit() {

       if (document.getElementById("tick").checked == true) {


              document.getElementById("uxSubmit").enabled = true;
          }
       else {
             document.getElementById("uxSubmit").enabled = false;
          }


      }
 </script>

to understand the problem better that I am talking about and to see my page live please go to the following link. http://t.c.mypeoplebiz.com/sagepay-careers/2935-commercial-litigator-solicitor-1-3-years-pqe.aspx

and click apply now button.

A popup will appear. please give a email address to register. (don't worry. it does not have to be a original email address. just [email protected] is fine).

When you upload a document then you can see the form.The check box is at the bottom of the page.

Solution

In your browser, right click the page, click view source (or however you do it for your browser). Notice that the ID's have changed? That makes it not find your elements to enable them.

<script type="text/javascript">
function EnableSubmit() {  
    if (document.getElementById('<%= tick.ClientId %>').checked == true) {  
        document.getElementById('<%= uxSubmit.ClientId %>').enabled = true;
    }
    else {
        document.getElementById('<%= uxSubmit.ClientId %>').enabled = false;
    }
}
</script>

One solution is to embed the client ID into your script with an inline server side expression. Another is to change the ClientIDMode. Setting the ClientIdMode to static will make the client side use the same ID on the client and server, avoiding the need for an inline expression.