爲什麼這段代碼不工作？

Question

可能重複：
changing password field to text with checkbox with jquery

的代碼應該檢查是否複選框被選中，然後從密碼的密碼字段更改爲普通文字，反之亦然。

$('#cpassword_lf').change(function(){ 
    if($('#cpassword_lf').is(':checked')) 
    { 
     $('#password_loginform').attr('type', 'text'); 
    } 
    else 
    { 
     $('#password_loginform').attr('type', 'password'); 
    } 
}); 

Answer 1

你不允許更改type屬性，這裏是一個簡單的解決方案，雖然做同樣的事情：http://jsfiddle.net/ryWgY/2

HTML：

<input type="checkbox" id="cpassword_lf" /> 
<input type="password" id="password_loginform_hidden" /> 
<input type="text" id="password_loginform_clear" /> 

的Javascript：

$(function() 
{ 
    $('#password_loginform_clear').hide(); 
    $('#cpassword_lf').change(function() 
    { 
     if(!$('#cpassword_lf').is(':checked')) 
     { 
      $('#password_loginform_clear').hide(); 
      $('#password_loginform_hidden').show(); 

      $('#password_loginform_hidden').val($('#password_loginform_clear').val()); 
      $('#password_loginform_clear').val(''); 
     } 
     else 
     { 
      $('#password_loginform_clear').show(); 
      $('#password_loginform_hidden').hide(); 

      $('#password_loginform_clear').val($('#password_loginform_hidden').val()); 
      $('#password_loginform_hidden').val(''); 
     } 
    }); 
}); 

Answer 2

出於安全原因，瀏覽器通常不會允許你改變輸入的類型。下面是一些建議的解決方案：

jQuery: Change element type from hidden to input

Answer 3

從jQuery文檔上attr：

jQuery的禁止改變一個或 元素的類型屬性，並會在所有瀏覽器拋出一個錯誤。這是因爲無法在Internet Explorer中更改 類型屬性。

查看關於此問題的各種解決方案的鏈接問題。

作爲一個側面說明，事件處理this將參考已更改的元素，所以你並不需要再次使用選擇內：

$("#someElem").change(function() { 
    //$(this) == $("#someElem") 
}); 

Answer 4

而不是.attr嘗試使用.prop

$('#cpassword_lf').change(function(){ 
    if($(this).is(':checked')) 
     $('#password_loginform').prop('type', 'text'); 
    else 
     $('#password_loginform').prop('type', 'password');  
}); 

不知道什麼downvote約爲：http://jsfiddle.net/vol7ron/qMhug/ 似乎在Chrome中，FF和Safari的工作（在IE ATM不能測試）

Answer 5

正如其他人所說：這幾乎是jQuery: Change element type from hidden to input的重複。

將這個問題的答案應用於您的具體情況，您最終得到這個結果。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $('#cpassword_lf').change(function(){ 
    var pass_or_text_input = $('#password_loginform'); 
    var marker = $('<span />').insertBefore(pass_or_text_input); 
    pass_or_text_input.detach(); 
    if ($('#cpassword_lf').is(':checked')) { 
     pass_or_text_input.attr('type', 'text'); 
    } else { 
     pass_or_text_input.attr('type', 'password'); 
    } 
    pass_or_text_input.insertAfter(marker); 
    marker.remove(); 
    }); 
}); 
</script> 
<input id="cpassword_lf" type="checkbox"></input> 
<input id="password_loginform" value="secret"></input>