我的jquery验证程序的顺序错误，我也不知道为什么

Question

My form validator works, but it works in a certain order, if I check the checkbox, it works fine, but if I fill the inputs first and then use the checkbox, it not works, unless I type something in the inputs

 $(document).ready(function() { $('#send').attr('disabled', true); $('.input,#check').on('keyup', function() { var text_value = $('.input-cpk').val(); if (text_value !== '' && (document.getElementById('check').checked)) { $('#send').attr('disabled', false); } else { $('#send').attr('disabled', true); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="block oh fr col-9 margem-d2 text-left" action="enviar-calculo.php" method="post" target="votar" name="cpk"> <input type="text" name="nome" id="nome" class="input-cpk col-20"> <input type="number" name="telefone" class="input-cpk-tel"> <input type="submit" value="CALCULAR" id="send" class="f-josefin-sb f-branca bg-amarelo botao" onclick="output();"> <input type="checkbox" id="check" name="others" /> </form> 

Answer 1

You only run your validation code during the keyup event, which only happens on the input boxes. You also need to do validation during a click event on the checkbox.

You can put multiple event names in the argument to .on() , to handle both with the same code.

You also have an incorrect class .input , there are no elements with class="input" in the HTML. I've changed it to .input-cpk .

 $(document).ready(function() { $('#send').prop('disabled', true); $('.input-cpk,#check').on('keyup click', function() { var text_value = $('.input-cpk').val(); if (text_value !== '' && (document.getElementById('check').checked)) { $('#send').prop('disabled', false); } else { $('#send').prop('disabled', true); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="block oh fr col-9 margem-d2 text-left" action="enviar-calculo.php" method="post" target="votar" name="cpk"> <input type="text" name="nome" id="nome" class="input-cpk col-20"> <input type="number" name="telefone" class="input-cpk-tel"> <input type="submit" value="CALCULAR" id="send" class="f-josefin-sb f-branca bg-amarelo botao" onclick="output();"> <input type="checkbox" id="check" name="others" /> </form> 

Answer 2

It's because you're using the wrong selector.

Try this $('input,#check').on('keyup', function() {

Instead of this $('.input,#check').on('keyup', function() {

Additionally you might want to use the .on('change') instead of .on('keyup')