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

Question

I am trying to keep an input disabled until 2 inputs have atleast 4 characters. The closest I was able to find on SO was a user settling for 8 characters total but this would allow for one of the inputs to be blank in the other had over 8. Here is what I have tried:

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

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

Interestingly I can console.log(foo.length) and console.log(bar.length) and see both lengths ticking up just fine with each keyup .

Answer 1

As A. Wolff has mentioned, your condition is using > instead of >= .

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

---

If you have 2 input elements, you can also invert the condition:

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

Conceptually that means "disable if any input is not 4 characters long" instead of "do not disable if both inputs are more than 4 characters long".

Answer 2

Your code works as far as I can see. The only issue is that your condition checks for at least 5 characters, not 4 characters, due to the operator you've chosen to use.

Use a >= instead, as this asserts something that is "equal to or greater than".

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <form id="ancestor"> <input name="foo"> <input name="bar"> <input id="some-button" type="submit" disabled> </form> 

Answer 3

You could try matching the jquery object length against a filtered jquery object to see if they are different.

$('#ancestor input').on('input keyup change paste', function () {
    var els = $('input[name=foo],input[name=bar]');
    var filtered = els.filter(function(){
       return (this.value.length >= 4); 
    });
    $('#some-button').prop('disabled', (els.length != filtered.length));
});

http://jsfiddle.net/9se4x2an/

Answer 4

The fact is, I've been staring at this for 3 hours and it was just a typo (misspelled length as lengh on one of the variables). Needed more coffee to see it apparently. Thanks to everyone for helping.