Rails应用中通过jQuery根据Checkbox状态设置对应Select字段为必填项的问题求解

要实现仅针对目标Select字段设置必填项的需求，关键是精准定位到.finished行内的两个Select元素，而不是全局所有Select或者错误的选择器。这里是调整后的完整jQuery代码：

// 页面加载时先处理初始状态
$(document).ready(function() {
  const $stillInRole = $('.still-in-role');
  const $finishedRow = $stillInRole.closest('.row').prev('.finished');
  const $finishedSelects = $finishedRow.find('select');

  // 根据初始勾选状态设置显示/隐藏和必填属性
  if ($stillInRole.is(':checked')) {
    $finishedRow.hide();
    $finishedSelects.removeAttr('required');
  } else {
    $finishedRow.show();
    $finishedSelects.attr('required', true);
  }

  // 复选框变化时的处理逻辑
  $stillInRole.change(function() {
    if (this.checked) {
      $finishedRow.hide();
      $finishedSelects.removeAttr('required');
    } else {
      $finishedRow.show();
      $finishedSelects.attr('required', true);
    }
  });
});

关键细节说明： #

• 精准定位目标元素：通过$stillInRole.closest('.row').prev('.finished')找到对应的.finished行，再用.find('select')锁定该行内的两个Select字段（finish_month和finish_year），完全不会影响页面上其他Select元素。
• 处理初始状态：页面加载时就根据复选框的默认勾选状态，同步设置字段的显示/隐藏和必填属性，避免页面刚加载时状态不符合预期。
• 动态切换必填属性：勾选复选框时移除required属性（字段被隐藏，无需校验），未勾选时添加required属性，确保表单验证逻辑和字段可见性匹配。

另外，也可以用prop()方法代替attr()来处理布尔类型的属性（比如required），效果完全一致：

// 添加必填
$finishedSelects.prop('required', true);
// 移除必填
$finishedSelects.prop('required', false);

这样就能完美实现你想要的效果：仅当复选框未勾选、对应Select字段可见时，将它们设为必填项。

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