jquery with check box in asp.net problem

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>

You need to learn Javascript.

SLaks
– SLaks

2010-02-28 12:05:28 +00:00
Commented Feb 28, 2010 at 12:05 — SLaks
– SLaks, Commented Feb 28, 2010 at 12:05

Muhammad Hasan Khan · Accepted Answer · 2010-02-28 07:12:59Z

1

<script type='text/javascript'>
    $('#chkhtml').click(function(){
        if ($(this).attr('checked'))
            $("#txthtml").mask("999-99-9999");
        else
            $("#txthtml").mask("99/99/9999");
    });

   $(function(){
       $("#txthtml").mask("99/99/9999"); // this is default mask
   });
</script>

I'm guessing you want to change the mask when checkbox changes its state but you don't know how you can achieve this.

edited Feb 28, 2010 at 7:12

answered Feb 28, 2010 at 5:06

Muhammad Hasan Khan

35.2k16 gold badges93 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eyla Over a year ago

when I tried your code the text box will have no mask and nothing happen when I check the check box!!! any advice?

Muhammad Hasan Khan Over a year ago

You can provide a default mask on load. See the modified code.

SLaks · Accepted Answer · 2010-02-28 05:02:05Z

0

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"
    );
});

answered Feb 28, 2010 at 5:02

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

3 Comments

Eyla Over a year ago

Thank for your help, Now with your code when the page load I will have the mask for else condition and when I check the box nothing happen and this happen for both codes. did I miss any attribute to add to the check box tag and what I should do?

SLaks Over a year ago

You need to add a handler to the click event to run your code whenever the checkbox is clicked.

Eyla Over a year ago

can you help me with this please because I'm new with java script and jquery

Scott Ivey · Accepted Answer · 2010-04-12 14:46:15Z

0

Along with the other answers, here's an alternate way to do it...

<script type='text/javascript'> 

    $(document).ready(function() {

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

    }); 

</script>

edited Apr 12, 2010 at 14:46

answered Feb 28, 2010 at 5:09

Scott Ivey

41.7k21 gold badges85 silver badges118 bronze badges

1 Comment

Eyla Over a year ago

when I tried your code the text box will have no mask and nothing happen when I check the check box!!! any advice?

Collectives™ on Stack Overflow

jquery with check box in asp.net problem

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related