Question

I’m trying to mask text box with 2 different masks when a check box has been checked using jquery.

I tried my code with html text box and html check box and it is working ok but when I tried my code with asp text box and asp check box there is no response.

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 IDs are longer than that (In your case at least Content2$chkasp instead of chkasp, maybe longer), use .ClientID to resolve this, like this:

$(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 down using a conditional expression:

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