需用jQuery实现输入文本框切换，当前方法在新版jQuery中已弃用

嘿，刚接触jQuery就遇到版本适配问题很正常，我来帮你把这个地址切换功能改成适配新版jQuery的写法！

首先，咱们先理清楚核心需求：根据选择的国家是美国还是其他，切换两组地址输入框的启用/禁用状态。旧代码里的.change(fn)在新版jQuery里只是被标记为过时，并不是完全不能用，但官方推荐更灵活的写法，另外控制输入框禁用状态的方式也有更规范的方案，咱们一步步来：

第一步：给地址框分组加类名 #

先给HTML里的美国地址框和非美国地址框分别加上统一的类名，这样用jQuery选择起来更方便，示例如下：

<!-- 国家选择框 -->
<select id="country-select">
  <option value="US">United States</option>
  <option value="CA">Canada</option>
  <option value="GB">United Kingdom</option>
  <!-- 其他国家选项 -->
</select>

<!-- 美国地址输入组 -->
<div class="address-group us-address-fields">
  <input type="text" placeholder="州">
  <input type="text" placeholder="邮政编码">
</div>

<!-- 非美国地址输入组 -->
<div class="address-group international-address-fields">
  <input type="text" placeholder="省份/地区">
  <input type="text" placeholder="邮政编码/邮编">
</div>

第二步：编写新版jQuery代码 #

新版jQuery里，我们用.on('change', ...)来绑定事件，用.prop('disabled', 状态)来控制输入框的禁用/启用，完整代码如下：

// 等待DOM加载完成再执行代码（简写写法）
$(function() {
  // 缓存DOM元素的jQuery对象，避免重复查找提升性能
  const $countrySelect = $('#country-select');
  const $usFields = $('.us-address-fields input');
  const $intlFields = $('.international-address-fields input');

  // 定义状态更新函数：根据选中的国家切换输入框状态
  function updateAddressFields() {
    const isUSSelected = $countrySelect.val() === 'US';
    // 美国地址框：选中美国则启用，否则禁用
    $usFields.prop('disabled', !isUSSelected);
    // 非美国地址框：选中美国则禁用，否则启用
    $intlFields.prop('disabled', isUSSelected);
  }

  // 页面加载时先执行一次，初始化状态
  updateAddressFields();

  // 绑定国家选择框的change事件（新版推荐写法）
  $countrySelect.on('change', updateAddressFields);
});

关键变化点说明 #

1. 事件绑定的升级：旧的.change(fn)其实是.on('change', fn)的简写，新版jQuery推荐用.on()的写法，因为它更灵活——不仅能绑定单个事件，还能绑定多个事件、实现事件委托，扩展性更强。
2. 禁用状态的规范写法：旧代码可能用.attr('disabled', 'disabled')或者.removeAttr('disabled')，但新版jQuery里，对于disabled这种布尔类型的元素状态属性（property），官方推荐用.prop('disabled', true/false)，这样更准确，因为disabled是元素本身的状态，不是HTML标签上的属性。
3. DOM元素缓存：把常用的jQuery对象存在变量里，避免每次事件触发都重新查找DOM，这是写jQuery代码的基础好习惯，能提升页面性能。

小提示 #

• 如果后续需要给整个地址组（比如包裹输入框的div）做显示/隐藏，也可以搭配.show()/.hide()或者.toggle()使用，但你的需求是禁用/启用，所以用.prop('disabled')就完全够用。
• 确保你引入的是新版jQuery（比如3.x以上版本），可以直接用官方CDN链接。

这样改完之后，代码不仅适配新版jQuery，还更清晰易维护，适合刚接触jQuery的你理解~

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