Question

I’m trying change an input mask for textbox when the the check box has been check or unckecked but the problem that always is picking up the else condation only even the check box it is check or not.

please advice to fix this problem.

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



  if ($('#chkhtml:checked').size() > 0)
{
jQuery(function($) {

       $("#txthtml").mask("999-99-9999");
   });
 } else { 
 jQuery(function($) {

       $("#txthtml").mask("99/99/9999");
   });
 }  

</script>


 </asp:Content>
 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
 <input id="chkhtml" type="checkbox" checked="checked" />

 </asp:Content>

Answer 1

Your code is running before the checkbox is rendered. Therefore, when the code runs, there are no checkboxes.

You need to wrap the entire if block in $(function() { ... }), which will execute the code in the function after the document finishes loading.

For example:

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

Alternatively, you can use an inline conditional:

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