How to get the jQuery MaskedInput unmask() function to work properly?

Question

I am trying to have one input on my page that I would like to have a U.S. phone number mask by default. If a end user clicks a checkbox specifing they would like to enter a International phone number I want the mask to be removed.

I have tried multiple ways and have been unsuccessful thus far. In the current project I am using jQuery to hide/show a completely different input. But I don't like that option and would like a more streamlined approach.

I am using the following:

jQuery 1.4.1 (going to upgrade to 1.4.2 soon) and jQuery.MaskedInput-1.2.2

<script type="text/javascript">
$(document).ready(function($) {
  if ($("#InternationalOfficePhone").attr('checked') == false) {
    $("#OfficePhone").mask("(999) 999-9999? x99999");
  }
});

$("#InternationalOfficePhone").click(function() {
  if ($("#InternationalOfficePhone").attr('checked') == true) {
    //$("#OfficePhone").mask(); //doesn't work
    //$("#OfficePhone").unmask(); //doesn't work
    $("#OfficePhone").unmask("(999) 999-9999? x99999"); //doesn't work
  } else {
    $("#OfficePhone").mask("(999) 999-9999? x99999");
  }
});
</script>

The code above works properly to set the default mask, but no matter what I try on the click event for the InternationalOfficePhone it doesn't remove the mask.

Any help is much appreciated.

Answer 1

Try using the :checked instead of attr check, I think that is the problem. I mean use $('#InternationalOfficePhone').is(':checked') in the if condition.

Answer 2

I was able to figure out the code to get it to work. Below is the code I am using now.

<script type="text/javascript">
$(function($) {
  $("#OfficePhone").mask("(999) 999-9999? x99999");
  $("#InternationalOfficePhone").click(function() {
    var mask = "(999) 999-9999? x99999";
    if ($("#InternationalOfficePhone").is(':checked')) {
      $("#OfficePhone").unmask(mask);
    } else {
      $("#OfficePhone").mask(mask);
    }
  });
});
</script>