最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Jquery disable a button until two inputs have minimum length - Stack Overflow

programmeradmin2浏览0评论

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.

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.

Share Improve this question asked Nov 19, 2015 at 17:29 Shawn CookeShawn Cooke 9671 gold badge11 silver badges31 bronze badges 5
  • 1 JSFiddle please, any problems you have? – nicael Commented Nov 19, 2015 at 17:31
  • 2 At least 4 characters so should be >= 4. Now, what is your issue??? – A. Wolff Commented Nov 19, 2015 at 17:33
  • 1 "atleast 4 characters" -> you should've used >3 instead of >4? jsfiddle/9woyctz2 – nicael Commented Nov 19, 2015 at 17:33
  • Except for the typo in the > sign, it looks like your stuff was working. – Ernesto Commented Nov 19, 2015 at 17:40
  • your code might works, you should use >3 for atleast four chars – Azad Commented Nov 19, 2015 at 17:42
Add a ment  | 

4 Answers 4

Reset to default 5

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".

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./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>

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/9se4x2an/

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.

发布评论

评论列表(0)

  1. 暂无评论