jQuery keypress function not working properly

Question

I am making some changes in UI, if a user select TX from dropdown then a textbox should accept only numbers upto 10 char otherwise if user select NY then user can enter alphanumeric upto 15 char, the code is working fine only for the first time. Then for any selection the textbox accept only numbers (irrespective of selection). The JSfiddle link is below :

https://jsfiddle.net/narendrak/t9n9hbgc/1/

Code snippet is below:

  <input type="text" tabindex="7" maxlength="10" size="18" name="stateinfo"      id="stateinfo" style="text-transform: uppercase;" value="" disabled />
    <select name="states" id="states" value="State">  
    <option value="State">State</option>
    <option value="NY">NY</option>
    <option value="TX">TX</option>
    </select>

JS code :

$(document).ready(function() {
  $('#states').change(function() {
    var dropdown = $("#states").val();
    if (dropdown == "State") {
      $("#stateinfo").val("");
      $("#stateinfo").attr('disabled', 'disabled');
    } else if (dropdown == "TX") {
        $('#stateinfo').keypress(function(e) {
        var regex = new RegExp("^[0-9]+$");
        var num = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(num)) {
          return true;
        }
        e.preventDefault();
        return false;
      });
      $("#stateinfo").removeAttr('disabled');
      $("#stateinfo").val("");
      $("#stateinfo").attr("maxlength", "10");
    } else {
      $('#stateinfo').keypress(function(e) {
        var regex = new RegExp("^[a-zA-Z0-9]+$");
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(str)) {
          return true;
        }
        e.preventDefault();
        return false;
      });
      $("#stateinfo").removeAttr('disabled');
      $("#stateinfo").val("");
      $("#stateinfo").attr("maxlength", "15");
    }
  });
});

Any help is appreciated.

Answer 1

You just need UNBIND a handler

 $(document).ready(function() {
  $('#states').change(function() {

    $( "#stateinfo").unbind( "keypress" );

    var dropdown = $("#states").val();
    if (dropdown == "State") {
      $("#stateinfo").val("");
      $("#stateinfo").attr('disabled', 'disabled');
    } else if (dropdown == "TX") {
        $('#stateinfo').keypress(function(e) {
        var regex = new RegExp("^[0-9]+$");
        var num = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(num)) {
          return true;
        }
        e.preventDefault();
        return false;
      });
      $("#stateinfo").removeAttr('disabled');
      $("#stateinfo").val("");
      $("#stateinfo").attr("maxlength", "10");
    } else {
      $('#stateinfo').keypress(function(e) {
        var regex = new RegExp("^[a-zA-Z0-9]+$");
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(str)) {
          return true;
        }
        e.preventDefault();
        return false;
      });
      $("#stateinfo").removeAttr('disabled');
      $("#stateinfo").val("");
      $("#stateinfo").attr("maxlength", "15");
    }
  });
});