jquery - 比较 if 条件中的输入值

Question

我正在尝试在 jQuery 中使用简单的 if 条件启用/禁用输入按钮，但不知何故 if 正在工作，但 else if > 不起作用。我试图在 0 - 40 之间的范围内启用输入按钮。当输入高于 0 的数字时，该按钮会启用，但当我高于 40 时，该按钮不会禁用。我做错了什么？

$(document).ready(function() {
  $('#btn').prop('disabled', true);
  
  $('#temp').keyup(function() {
    if ($('#temp').val() > '40') {
      $('#btn').prop('disabled', true);
    } else if ($('#temp').val() > '0') {
      $('#btn').prop('disabled', false);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="/mainpage">
  <div>
    <label>Temperatur in <strong>°C</strong>:</label>
    <input type="number" id="temp" name='temperatur'> </input>
    <input type="submit" id="btn" class="btn btn-info btn-lg" name="button" value="Weiter">
  </div>
</form>

Answer 1

您正在与数字字符串进行字符串比较，这可能会令人惊讶。例如，"20"> "5" 为 false，因为 "5" 大于 "2"。

我怀疑这就是让你措手不及的原因。在进行比较之前转换为数字:

var value = +$("#temp").val();
// −−−−−−−−−^
if (value > 40) {
//          ^−−−−−− no quotes
   $('#btn').prop('disabled', true);
} else if (value > 0) {
// No quotes −−−−−−^
     $('#btn').prop('disabled', false);
}

有很多不同的方法可以将字符串转换为数字。在上面我使用的是一元 +，但是 see my answer here获取包含优点和缺点的完整列表。

<小时/>

我应该注意到，当值 > 40 时禁用输入但仅在值是 1-39 时才启用它似乎很奇怪。也许

$("#btn").prop("disabled", +$("#temp").val() > 40);

当值 > 40 时将禁用，当值 <= 40 时启用。