如何用jQuery实现输入金额大于2000时显示PAN卡号输入框功能？

云上老周

2026-10-1

问题修复方案

原有代码存在的问题

ID重复冲突：外层包裹PAN输入框的div和内部的input都使用了id="pan"，会导致jQuery选择器定位元素异常
缺少反向判断逻辑：只写了金额≥2000时的显示逻辑，没有补充金额<2000时的隐藏、取消必填的逻辑
属性操作不匹配：你给PAN外层div设置的是display: none行内样式，用hidden属性控制显式不生效，应该直接操作display属性或者用jQuery的show/hide方法
触发时机不合理：change事件只有输入框失焦时才触发，换成input事件可以实时响应用户输入
没有处理空值异常：用户清空输入框时，parseInt(amount)会得到NaN，判断逻辑会出错

修复后完整代码

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control general_amt" id="general_amt" name="general_amt" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />

<div class="col-md-12" id="panWrap" style="display: none">
  <label><b>PAN No</b></label>
  <input type="text" id="panInput" class="form-control" style="border: 1px solid #000" name="pan" placeholder="PAN No" />
</div>

JS部分

$(document).ready(function() {
  // 绑定input事件实时响应输入
  $("#general_amt").on('input', function() {
    var amount = $(this).val();
    // 空值默认按0处理，避免NaN问题
    var amountNum = amount ? parseInt(amount) : 0;
    if (amountNum >= 2000) {
      $("#panWrap").show();
      $("#panInput").attr('disabled', false).attr("required", true);
    } else {
      $("#panWrap").hide();
      $("#panInput").attr('disabled', true).attr("required", false).val('');
    }
  });
});