使用jQuery实现仅禁用对应行couponCode字段遇阻，求解决方案

问题背景 #

我通过Smarty自动生成了一个转盘分区设置的表格，每一行对应一个转盘分区，包含以下设置项：

• slice（分区数字）
• coupon（中奖/未中奖选择控件）
• slice label（奖品标签，标记为"losing"代表未中奖）
• coupon code（优惠码输入字段，如20OFF）
• slice color（分区颜色）

我想要实现：当某一行的coupon控件选中"未中奖"（值为losing）时，禁用该行对应的coupon code字段。但目前写的函数会把所有行的coupon code都禁用，而且因为Smarty生成的元素类名完全一致，没法单独定位某一行的目标字段。当前代码如下：

$('.couponType').change(function(){ 
  if($(this).val() == 'losing') { 
    $('.couponCode').closest('.couponCode').attr('disabled','disabled'); 
  } else { 
    $('.couponCode').removeAttr('disabled'); 
  } 
});

核心问题分析 #

你的代码里用了全局选择器$('.couponCode')，所以每次触发事件时都会选中页面上所有的优惠码字段，这就是为什么会全部禁用的原因。要解决这个问题，关键是只操作当前触发事件的控件所在行的优惠码字段。

解决思路与修正代码 #

1. 定位当前行的目标元素

利用jQuery的DOM遍历方法，从触发change事件的.couponType控件出发，先找到它所在的父级行（比如<tr>），再在这一行内部查找对应的.couponCode字段，这样就能精准定位到当前行的目标元素，不会影响其他行。

2. 优化属性操作方式

对于disabled这类布尔型属性，推荐使用prop()方法而不是attr()，prop()能更准确地处理元素的状态属性。

修正后的代码如下：

$('.couponType').change(function() {
  // 找到当前控件所在的表格行
  const currentRow = $(this).closest('tr');
  // 在当前行内找到对应的优惠券代码字段
  const targetCouponCode = currentRow.find('.couponCode');
  
  // 根据选中状态设置禁用属性
  targetCouponCode.prop('disabled', $(this).val() === 'losing');
});

3. 补充初始化逻辑（可选）

如果页面加载时已经有默认选中"未中奖"的行，建议在页面初始化时也执行一次状态设置，确保初始状态符合预期：

// 页面加载完成后初始化状态
$(document).ready(function() {
  // 遍历所有couponType控件，设置对应优惠码字段的初始状态
  $('.couponType').each(function() {
    const currentRow = $(this).closest('tr');
    const targetCouponCode = currentRow.find('.couponCode');
    targetCouponCode.prop('disabled', $(this).val() === 'losing');
  });

  // 绑定change事件
  $('.couponType').change(function() {
    const currentRow = $(this).closest('tr');
    const targetCouponCode = currentRow.find('.couponCode');
    targetCouponCode.prop('disabled', $(this).val() === 'losing');
  });
});

注意事项 #

如果你的表格行不是用<tr>包裹的（比如用了<div>作为行容器），只需要把closest('tr')改成对应的父容器选择器即可，比如closest('.table-row')。

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