jQuery：单选按钮控制文本框必填样式切换异常的解决方法

问题分析 #

当前代码存在两个核心问题：

1. 每次点击"Yes"时重复绑定blur事件，导致事件多次触发、逻辑混乱
2. 点击"No"后未移除valid类，再次点击"Yes"时，valid类的样式会覆盖req类，导致红色边框无法显示

解决办法与优化代码 #

修改后的JavaScript代码 #

// 提前获取文本框元素，减少重复DOM查询
const $textfield = $('#textfield');

// 单次绑定blur事件，避免重复绑定导致的逻辑异常
$textfield.blur(function() {
  if ($(this).val().trim() !== '') {
    $(this).addClass('valid').removeClass('req');
  } else {
    $(this).addClass('req').removeClass('valid');
  }
});

// 用change事件处理单选按钮，覆盖鼠标点击、键盘切换等所有状态变化场景
$('input[name="radio"]').change(function() {
  const isYes = $(this).val() === 'Yes';
  
  if (isYes) {
    $textfield.prop({
      'required': true,
      'disabled': false
    }).removeClass('valid').addClass('req');
  } else {
    $textfield.prop({
      'required': false,
      'disabled': true
    }).val('').removeClass('req valid');
  }
});

关键修改点说明 #

• 避免重复事件绑定：将blur事件绑定移到全局，只执行一次，防止多次点击"Yes"导致事件堆积
• 类样式正确切换：
  • 点击"Yes"时先移除valid类再添加req类，确保红色边框样式优先生效
  • 文本框失去焦点时，根据内容是否为空自动切换req/valid类
• 统一DOM操作：提前缓存文本框元素，减少重复DOM查询，提升性能
• 状态完全重置：点击"No"时清空文本框内容并移除所有样式类，恢复到初始禁用状态
• 更合理的事件选择：用change事件处理单选按钮，覆盖所有状态变更场景（如键盘切换选项）

保持原有HTML与CSS #

HTML结构无需修改，CSS可保持原样（若需强化req样式优先级，可改为#textfield.req）

.req {
    border: 1px solid red;
}

.valid {
    border: 1px solid #ced4da;
}

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