为什么这段代码不工作？

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>