根据使用 jQuery 在第一个输入的值显示其他文本框

Question

我在 MVC 中做一些 HTML 并且在我的视图中有两个文本框。如果输入 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>