javascript - jquery mobileで選択時に入力タイプを変更する方法

Question

このスクリプトがあるとしましょう（jquery mobile 1.3.2）

 <script>
 $( document ).bind( "pageinit", function( event, data ) {
$("#ppreg").hide();
$("#smsreg").hide();
$(".group1").hide();
$(".group2").hide();
$(".group0").hide();

$('#selectcode').change(function() {
  var regtype = $("#selectcode option:selected").val();
    if (regtype == "@") {
      $("#ppreg").show();
      $("#smsreg").hide();
      $(".group1").show();
      $(".group2").hide();
      $(".group0").show();
      $("#UserName").setAttribute("type","tel");          
    } else {
      $("#ppreg").hide();
      $("#smsreg").show();
      $(".group2").show();
      $(".group1").hide();
      $(".group0").show();  
      $("#UserName").setAttribute("type","email");  
   }
  });
 });
</script>

および次の html フォーム:

  <label for="selectcode" class="select">LABEL"; 
  <select name="countrycode" id="selectcode" data-native-menu=\"true">
    <option value="">Choose one</option>
   <option value="@">email (email field)</option>
    <option value="+39" >SMS:(+39)</option>
  </select>
  <fieldset data-role="collapsible" data-theme="b" data-content-theme="d" data-collapsed="false">"
    <legend>"LOGIN</legend>"

<div class="group0>"

 <label for="UserName" id="smsreg" >Username1</label>
 <label for="UserName" id="ppreg" >Username 2</label>

<input title="TITLE" type="text" name="UserName" value="" class="required"  id="UserName" data-clear-btn="true"  />"

パスワード: .. その他のフィールド .. ログイン

問題: 選択時に入力タイプが変更されません。選択した値に応じて、input type="text" から input type="tel" または input type="email" に変更したいと思います

誰でもエラーがどこにあるのか説明できますか?

ここでjsfiddle：http://jsfiddle.net/raidnet/U754k/4/