Добавьте атрибут html, если входное значение соответствует требованиям

Question

Допустим, у меня есть два входа. Когда я ввожу значение в input1, например, 0.4 и соответствует требованию, input2 удалит атрибут readonly. Между тем, если я введу значение в input1 равное 0.3, то атрибут input2 снова станет доступным только для чтения.

Это не работает. Может быть, я что-то упустил здесь

$(".input1").keydown(function() {
    var dInput = $(this).val();
    if (dInput >= 0.4 && dInput <= 0.6) {
        $(".input2").attr('readonly', true);
    } else {
        $(".input2").removeAttr("readonly");
    }
});

function isNumberKey(e) { // stub
    return true;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="input1" onkeypress="return isNumberKey(event)" id="input1" name="input1" value="" />

<input type="text" class="input2" onkeypress="return isNumberKey(event)" id="input2" name="input2" value="" readonly />

Answer 1

Вы устанавливаете атрибут в неправильном состоянии. Я также предпочитаю input событие вместо keydown здесь:

$(".input1").on('input', function() {
    var dInput = $(this).val();
    if(dInput >= 0.4 && dInput <= 0.6){
      $(".input2").removeAttr("readonly");
    }
    else{
      $(".input2").attr('readonly', true);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="input1"  id="input1" name="input1" value="" />

<input type="text" class="input2" id="input2" name="input2" value="" readonly />

Answer 2

1: используйте функцию keyup, так как значение заполняется в поле позже, и вы пытаетесь захватить в keydown

2: я переключил операторы if и else согласно вашемуописание. Ваш оригинальный код противоречит тому, что вы говорите здесь.

        $(".input1").keyup(function() {

            var dInput = $(this).val();
            if(dInput >= 0.4 && dInput <= 0.6)
            {
                $(".input2").removeAttr("readonly");
            }
            else
            {
                $(".input2").attr('readonly',true);
            }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="input1" o id="input1" name="input1" value="" />

<input type="text" class="input2"  id="input2" name="input2" value="" readonly />

Answer 3

использование keyup

function isNumberKey(e){
}

   $(".input1").keyup(function() {

            var dInput = $(this).val();
            dInput = parseFloat(dInput);
            console.log(dInput);
            if(dInput >= 0.4 && dInput <= 0.6)
            {
                $(".input2").attr('readonly',true);
            }
            else
            {
                $(".input2").removeAttr("readonly");
            }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="input1" onkeypress="return isNumberKey(event)" id="input1" name="input1" value="" />

<input type="text" class="input2" onkeypress="return isNumberKey(event)" id="input2" name="input2" value="" readonly />