Включить кнопку отправки с проверкой

Question

Вот мой код. Проблема, с которой я столкнулся, состоит в том, как заставить работать кнопку отправки, только когда она равна 10?

<input type="text" name="qty>
<input type="submit" name="proceedbtn" value="PROCEED" id="button">

<script>
   $(document).ready(function(){
        $('input[id="button"]').attr('disabled',true);
        $('input[id="qty"]').on('keyup',function(){
            if($(this).val() == 10)
            $('input[id="button"]').attr('disabled',false);
    });
});
</script>

Как я могу это исправить?

Answer 1

Я сделал некоторые исправления в вашем коде, и теперь он работает. Проблема в вашем коде заключалась в том, что вы записывали событие key up для идентификатора, но не назначали никакого идентификатора для поля ввода, но у вас было свойство name, поэтому вместо id я использовал это свойство name в качестве селектора для события key up.

$(document).ready(function() {
  $('input[id="button"]').attr('disabled', true);
  $('input[name="qty"]').on('keyup', function() {
    if ($(this).val() == 10) {
      $('input[id="button"]').attr('disabled', false);
    } else {
      $('input[id="button"]').attr('disabled', true);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="" name="qty" />
<input type="submit" name="proceedbtn" value="PROCEED" id="button" />

Answer 2

Я сделал несколько изданий для вашего кода, и ЭТО РАБОТАЕТ ОТЛИЧНО!

$(document).ready(function() {
        $('#button').attr('disabled', true);
        $('input[name="qty"]').on('keyup', function () {
            if ($(this).val() == 10) {
                $('#button').attr('disabled', false);
            }else {
                $('#button').attr('disabled', true);
            }
        });
    });

<input type="text" name="qty">
<input type="submit" name="proceedbtn" value="PROCEED" id="button">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

Пожалуйста, проверьте, я обновил ваш код

  $(document).ready(function(){
        $('input[id="button"]').attr('disabled',true);
        $('input[name="qty"]').keyup(function(){
            if($(this).val() == 10){
            $('input[id="button"]').removeAttr('disabled');
            }
            else{
              $('input[id="button"]').attr('disabled',true);
            }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="qty">
<input type="submit" name="proceedbtn" value="PROCEED" id="button">