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

没问题，我来帮你搞定这个需求。咱们可以通过jQuery轻松实现这个动态切换效果，具体步骤如下：

1. 调整HTML结构（给重量字段加标识） #

首先，给包含重量文本框的<div>添加一个唯一ID，这样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 id="weightField" class="field colon"> 
    <label>Enter Weight</label> 
    @Html.TextBoxFor(m => m.Weight, new { @class ="text210" }) 
  </div> 
</fieldset>

2. 编写jQuery逻辑 #

接下来，添加jQuery代码来处理输入变化和显示/隐藏逻辑。你可以把这段代码放在页面底部（或者@section Scripts里，如果是ASP.NET MVC的布局页结构）：

$(document).ready(function() {
  // 封装成函数，方便重复调用
  function toggleWeightVisibility() {
    // 获取年龄输入框的值，转换为数字
    var ageValue = parseInt($('input[name="Age"]').val());
    
    // 验证年龄是否在10-30之间（包含边界值）
    if (!isNaN(ageValue) && ageValue >= 10 && ageValue <= 30) {
      $('#weightField').show();
    } else {
      $('#weightField').hide();
    }
  }

  // 页面加载完成后，先执行一次初始化状态
  toggleWeightVisibility();

  // 给年龄输入框绑定事件：实时输入（keyup）和失去焦点（change）都触发
  $('input[name="Age"]').on('keyup change', function() {
    toggleWeightVisibility();
  });
});

代码说明 #

• 封装函数：把判断逻辑放进toggleWeightVisibility函数里，让代码更整洁，也方便在页面初始化和输入变化时重复调用。
• 初始化检查：页面加载时就执行一次函数，确保如果Age字段有默认值（比如从模型绑定过来的），重量框的初始状态是正确的。
• 双事件绑定：同时绑定keyup和change事件，keyup让用户输入时实时切换状态，change处理用户粘贴内容后失去焦点的场景，覆盖所有输入场景。
• 数值验证：用parseInt转换输入值，并用!isNaN判断是否是有效数字，避免非数字输入导致逻辑出错。

这样就能完美实现你要的效果啦！

内容的提问来源于stack exchange，提问作者AxV