Mask for asp text field using jquery

Question

I am trying to mask a text box with two different masks when the checkbox is checked using jquery.

I tried my code using the html and html text box and it works fine, but when I tried my code with the asp and asp text box, there is no answer.

any advice

here is my code:

 <%@ Page Title="" Language="C#" MasterPageFile="~/Imam.Master" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="Imam_Contacts.WebForm4" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

<script src="js/jquery-1.4.1.js" type="text/javascript"></script>


    <script src="js/jquery.maskedinput-1.2.2.js" type="text/javascript"></script>
      <script type="text/javascript">

          $(document).ready(

function() {

    $('#chkhtml').click(

 function() {
     if ($('#chkhtml:checked').length > 0) {
         $("#txthtml").mask("999-99-9999");
     } else {
         $("#txthtml").mask("99/99/9999");
     }
 });

});

$(document).ready(

function() {

    $('#chkasp').click(

 function() {
     if ($('#chkasp:checked').length > 0) {
         $("#txtasp").mask("999-99-9999");
     } else {
         $("#txtasp").mask("99/99/9999");
     }
 });

});
    </script>


</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:CheckBox ID="chkasp" runat="server" />
    asp:<asp:TextBox ID="txtasp" runat="server"></asp:TextBox>
    <input id="chkhtml" type="checkbox" checked="checked" title="chkhtml"  />HTML <input id="txthtml" type="text" />&nbsp; 

</asp:Content>

Answer 1

When your controls are inside another INamingContainer, their identifiers are longer than this (in your case, at least Content2$chkaspinstead chkasp, maybe more), use this .ClientIDto solve this problem, for example:

$(function() {
    $('#<%=chkasp.ClientID %>').click(function() {
     if ($(this).is(':checked')) {
         $("#<%=txtasp.ClientID %>").mask("999-99-9999");
     } else {
         $("#<%=txtasp.ClientID %>").mask("99/99/9999");
     }
});

Or shorten it with a conditional expression:

$('#<%=chkasp.ClientID %>').click(function() {
  $("#<%=txtasp.ClientID %>").mask($(this).is(':checked') ? 
                                   "999-99-9999" : "99/99/9999");
});