jquery - 检查文本字段是否为空

Question

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

http://jsfiddle.net/aaK9E/2/

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());
});

我尝试了 keyup 和 change 但如果用户有时写然后删除它也无济于事，复选框将保持启用状态。

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 演示

无论状态如何，它将禁用（即在文本框或密码框中输入）

$('#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");
});