简单 Javascript 函数不适用于 .ascx 文件

Question

我正在尝试在我的 asp.net 和 vb.net 应用程序的 .ascx 文件中使用一个简单的 javascript 函数。我在 asp 面板标签中包含了以下 html 代码。

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

以及 .ascx 文件中的以下 javascript 代码

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

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


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


}

正如您从代码中看到的那样，我正在尝试包含一个复选框。并且用户必须勾选复选框以使提交按钮处于活动状态。但是该功能不起作用。每当我勾选复选框时，屏幕前就会出现一个白色框（如弹出窗口）。

我已经尝试了 link 中给出的答案，但那样我的整个表格就变得不可见了。 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>

要更好地理解我正在谈论的问题并实时查看我的页面，请转到以下 link。 http://t.c.mypeoplebiz.com/sagepay-careers/2935-commercial-litigator-solicitor-1-3-years-pqe.aspx

然后点击立即申请按钮。

将出现一个弹出窗口。请给一个电子邮件地址进行注册。（别担心。它不必是原始电子邮件地址。只需 abc@xyz.com 即可）。

当您上传文档时，您会看到 form.The 复选框位于页面底部。

Answer 1

在您的浏览器中，右键单击页面，单击查看源代码（或者您为浏览器执行的操作）。注意到 ID 已经改变了吗？这使得它找不到您的元素来启用它们。

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

一种解决方案是使用内联服务器端表达式将客户端 ID 嵌入到您的脚本中。另一种是改ClientIDMode。将 ClientIdMode 设置为 static 将使客户端在客户端和服务器上使用相同的 ID，避免需要内联表达式。

Answer 2

ASP.NET 破坏任何设置为 runat="server" 的 ID。您需要向它询问该控件的实际 ID。如：

function EnableSubmit() {

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

        ...
    }


}

简单 Javascript 函数不适用于 .ascx 文件

Simple Javascript function is not working on .ascx file

javascript

asp.net

vb.net

colorbox

ascx