Простая функция Javascript не работает над файлом .ascx

Question

Я пытаюсь сделать простую работу javascript в файле .ascx в моем приложении asp.net и vb.net. Я включил следующий html-код внутри тега панели asp.

    <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> 

и следующий Javascript код в файле .ascx

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

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


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


} 

Как вы можете видеть из кода я пытаюсь включить флажок. И пользователь должен отметить этот флажок, чтобы кнопка отправки была активной. Но функция не работает. всякий раз, когда я устанавливаю флажок, перед экраном появляется белый ящик (например, popoup).

Я пробовал ответ, указанный в этой ссылке, но таким образом моя вся форма стала невидимой. How to use javascript in .ascx pages

Я ценю ваше предложение и помощь.

Спасибо

Полный код в .ascx файле дается below.Please дайте мне знать, если вам нужна дополнительная информация.

<%@ 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> 

понять проблему лучше, что я имею в виду и видеть мою страницу жить, пожалуйста, перейдите по следующей ссылке. http://t.c.mypeoplebiz.com/sagepay-careers/2935-commercial-litigator-solicitor-1-3-years-pqe.aspx

и нажмите кнопку «Добавить сейчас».

Появится всплывающее окно. укажите адрес электронной почты для регистрации. (не волнуйтесь, он не должен быть оригинальным адресом электронной почты. просто abc@xyz.com в порядке).

При загрузке документа вы можете увидеть форму. Флажок находится в нижней части страницы.

Answer 1

В вашем браузере щелкните правой кнопкой мыши страницу, выберите источник просмотра (или, тем не менее, сделайте это для своего браузера). Обратите внимание, что идентификаторы изменены? Это заставляет его не находить ваши элементы для их включения.

<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> 

Одним из решений является встраивание идентификатора клиента в ваш скрипт с помощью встроенного выражения на стороне сервера. Другим является изменение ClientIDMode. Установка ClientIdMode на static приведет к тому, что клиентская сторона будет использовать один и тот же идентификатор на клиенте и сервере, избегая необходимости встроенного выражения.

Answer 2

ASP.NET управляет идентификаторами на все, что установлено в runat = "server". Вам нужно будет задать ему фактический идентификатор этого элемента управления. Как в:

function EnableSubmit() { 

    var id = "<%= tick.ClientID %>"; 
    if (document.getElementById(id).checked == true) { 

     ... 
    } 


}