Question

我有这个“显示密码”复选框切换密码可见性，它工作正常，但我只是想在密码字段为空时禁用复选框，并且仅在输入某个时间时启用。

var showPass=false;
$('#c').change(function(){
    showPass = ($('#c:checked').length>0);
    if (showPass){
        $('#p').hide();
        $('#t').show();
    }else{
        $('#t').hide();
        $('#p').show();
    }
});

$('#p').change(function(){
    if (!showPass) $('#t').val($('#p').val());
});
$('#t').change(function(){
    if (showPass) $('#p').val($('#t').val());
});

我尝试过更改密钥并进行更改，但如果用户写了一段时间然后将其删除则无效，则复选框将保持启用状态。

Answer 1

试试这个：http://jsfiddle.net/aaK9E/51/

var showPass = false;
$('#c').attr('disabled', 'disabled'); // disabled on doc ready
$('#c').change(function () {
   showPass = ($('#c:checked').length > 0);
   if (showPass) {
       $('#p').hide();
       $('#t').show();
   } else {
       $('#t').hide();
       $('#p').show();
   }
});

$('#p').keypress(function () { // use keypress instead of change
   $('#c').removeAttr('disabled'); // remove the attr 'disabled'
   if (!showPass) $('#t').val($('#p').val());
});
$('#t').change(function () {
  if (showPass) $('#p').val($('#t').val());
});

如果backspace is done和密码字段没有任何值，则可以更改为

$('#p').keyup(function () { 
  $('#c').removeAttr('disabled');
  if (!showPass) {
    $('#t').val($('#p').val());
  }
  if ($(this).val() == '') { // this will check the val if there is not
    $('#c').attr('disabled', 'disabled'); it will disable it again.
  }
});

如果使用lates jquery：

$('#p').on('keyup', function () { // this '.on()' requires latest jquery
  $('#c').removeAttr('disabled');
  if (!showPass) {
    $('#t').val($('#p').val());
  }
  if ($(this).val() == '') { // this will check the val if there is not
    $('#c').attr('disabled', 'disabled'); it will disable it again.
  }
});

如果需要try to use latest jquery

Answer 2

使用以下代码。 JSFiddle demo

无论状态如何（即输入文本框或密码框）都会禁用

$('#p, #t').keyup(function(){
  if ($(this).val() != "") {
    Enable();
  }
  else
  {
    Disable();
  }
});

function Enable() {
 $("#c").removeAttr("disabled");
}

function Disable() {
  $("#c").attr("disabled", true);
}

Answer 3

您可以使用keydown检查该框是否为空：

$('#p').keydown(function(){
  if( $(this).val() == "" ){
      $('#c').attr("disabled", true);
  }else{
      $('#c').removeAttr("disabled");
  }
});

在按键上，它会检查文本框是否为空，如果是，则禁用该复选框。然后你只需要执行if（）{检查页面加载初始状态。

Answer 4

试试这个： - http://jsfiddle.net/aaK9E/52/ 当密码字段为空时，这也是第一次。

<input type="text" size="50" id="t" />
<input type="password" size="50" id="p" /><br />
<input type="checkbox" id="c" disabled="true">Show Password



var showPass=false;
$('#c').change(function(){
    showPass = ($('#c:checked').length>=0);
    if (showPass){
        $('#p').hide();
        $('#t').show();
    }else{
        $('#t').hide();
        $('#p').show();
    }
});

$('#p').bind("change keyup keypress keydown",function(){
    if (!showPass) $('#t').val($('#p').val());
  if($(this).val()=='')
    $('#c').attr("disabled","true");
  else
    $('#c').removeAttr("disabled");
});
$('#t').bind("change keyup keypress keydown",function(){
    if (showPass) $('#p').val($('#t').val());
    if($(this).val()=='')
    $('#c').attr("disabled","true");
  else
    $('#c').removeAttr("disabled");
});

检查textfield是否为空

4 个答案: