檢查文本框是否爲空

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和變化，但如果用戶寫道有時它不會幫助，然後刪除了它，該複選框將保持啓用狀態。

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

如果鱸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

可以使用的keydown以檢查框爲空或不：

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

上的一個鍵了，它會檢查文本框爲空，如果是，它會禁用複選框。 然後你只需要做if（）{檢查頁面加載的初始狀態。

Answer 3

使用下面的代碼。 JSFiddle demo

將禁用不論狀態（即在文本框或密碼框中輸入）

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

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

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

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