Показать другое текстовое поле на основе значения, введенного в первом с использованием jQuery

Question

Я делаю HTML-код в MVC и у меня два текстовых поля на мой взгляд.Я должен показать текстовое поле веса, если введен возраст от 10 до 30 лет.Если нет, то не показывать и не скрывать, если изменилось.Я не уверен, как этого добиться с помощью jQuery.

<fieldset>
    <legend>
        <h3>Details</h3>
    </legend>

    <div class="field colon">
        <label>Enter Age</label>
        @Html.TextBoxFor(m => m.Age, new { @class ="text210" })
    </div>

    <div class="field colon">
        <label>Enter Weight</label>
        @Html.TextBoxFor(m => m.Weight, new { @class ="text210" })
    </div>

</fieldset>

Answer 1

Вы можете использовать этот код jQuery, чтобы скрыть и показать родительский div веса в зависимости от значения возраста:

$("#@Html.IdFor(m => m.Age)").on("change", function() {
  if (this.value > 9 && this.value < 31)
    $("#@Html.IdFor(m => m.Weight)").parent().hide();
  else
    $("#@Html.IdFor(m => m.Weight)").parent().show();
});

Если вы хотите начать со скрытого веса, добавьте этот CSS вего div:

<div class="field colon" style="display: none;">

Вот демонстрация, я преобразовал код ASP в его HTML-эквивалент:

$("#Age").on("change", function() {
  if (this.value > 9 && this.value < 31)
    $("#Weight").parent().hide();
  else
    $("#Weight").parent().show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
  <legend>
    <h3>Details</h3>
  </legend>

  <div class="field colon">
    <label>Enter Age</label>
    <input type="text" id="Age" name="age" />
  </div>

  <div class="field colon" style="display: none;">
    <label>Enter Weight</label>
    <input type="text" id="Weight" name="Weight" class="text210" />
  </div>
</fieldset>