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>

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

1 个答案: