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

来自attr上的jQuery文档：

jQuery禁止更改或的类型属性元素并将在所有浏览器中抛出错误。这是因为无法在Internet Explorer中更改type属性。

有关此问题的各种解决方案，请参阅相关问题。

作为旁注，事件处理程序this内部将引用已更改的元素，因此您不需要再次使用选择器：

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

Answer 3

出于安全原因，浏览器通常不允许您更改输入的类型。以下是一些建议的解决方案：

jQuery: Change element type from hidden to input

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>

为什么这段代码jquery不起作用？

5 个答案: