javascript - Jquery 禁用按钮，直到两个输入具有最小长度

Question

我试图保持输入禁用状态，直到 2 个输入至少包含 4 个字符。我能找到的最接近的 SO 是用户总共设置了 8 个字符，但这将允许其中一个输入为空白，而另一个输入则超过 8 个。这是我尝试过的:

没有on()

$('#ancestor input').keyup(function(){
  var foo = $('input[name=foo]').val();
  var bar = $('input[name=bar]').val();    
    if(foo.length > 4 && bar.length > 4){  
      $('#some-button').prop('disabled', false);
      }else{
      $('#some-button').prop('disabled', true);
      }  
});

使用on()

$('#ancestor input').on('keyup',function(){
  var foo = $('input[name=foo]').val();
  var bar = $('input[name=bar]').val();    
    if(foo.length > 4 && bar.length > 4){  
      $('#some-button').prop('disabled', false);
      }else{
      $('#some-button').prop('disabled', true);
      }  
});

有趣的是，我可以 console.log(foo.length) 和 console.log(bar.length) 并看到每个 的两个长度都很好键盘。

Answer 1

如A. Wolff 提到，你的条件是使用 > 而不是 >=。

if (foo.length >= 4 && bar.length >= 4) {  

<小时/>

如果您有 2 个输入元素，您还可以反转条件:

$('#ancestor input').keyup(function(){
  var lengthA = $('input[name=foo]').val().length;
  var lengthB = $('input[name=bar]').val().length;

  $('#some-button').prop('disabled', lengthA < 4 || lengthB < 4);
});

从概念上讲，这意味着“如果任何输入的长度不是 4 个字符，则禁用”，而不是“如果两个输入的长度超过 4 个字符，则不禁用”。