不同div类中单选按钮选中及底部按钮禁用问题求助

我现在在处理一个网页的单选按钮组，想要实现两个核心需求：一是默认选中每组里的第二个选项（就是带ExtendedHold值的那个），二是一开始要禁用底部.buttonsFooter里的按钮，直到用户修改任意一组的选项。但麻烦的是，这些单选按钮组的name属性都是动态生成的唯一值，不是常规同组共用一个name的情况，这让我卡壳了。

我已经能用jQuery拿到所有.subsRenewEntry的分组：

$( ".subsRenewEntry" ).each(function( index ) { console.log( index + ": " + $( this ).text() ); });

但尝试选中每组第二个单选按钮的代码都没生效，比如：

$( "rad" + index + "_ExtendedHold").filter('[value="ExtendedHold"]').prop('checked', true);
$('.screen-RenewSubscriptions_aspx').find('option[value="ExtendedHold"]').prop('checked', true);

单个分组的选中我是能实现的：

$('input:radio[name="action_f5d61c45-69fc-e711-8d62-000c2979ba39"]').filter('[value="ExtendedHold"]').attr('checked', true);

但这只能处理单个，我需要适配任意数量的动态分组。刚接触JS/jQuery，语法这块有点懵，希望能得到思路指引，不用给完整代码。

相关HTML结构 #

<div class="subsRenewEntry"> 
  <div class="seriesOptions" data-default="Renewed"> 
    <span> 
      <input id="rad0_Renewed" type="radio" name="action_f5d61c45-69fc-e711-8d62-000c2979ba39" value="Renewed" /> 
      <label for="rad0_Renewed" >Yes, I want to renew now</label> 
    </span> 
    <span> 
      <input id="rad0_ExtendedHold" type="radio" name="action_f5d61c45-69fc-e711-8d62-000c2979ba39" value="ExtendedHold" /> 
      <label for="rad0_ExtendedHold" >Not sure, keep my seat for the time being</label> 
    </span> 
  </div> 
</div> 
<div class="subsRenewEntry"> 
  <div class="seriesOptions" data-default="Renewed"> 
    <span> 
      <input id="rad1_Renewed" type="radio" name="action_21e7930b-31fd-e711-8d62-000c2979ba39" value="Renewed" /> 
      <label for="rad1_Renewed" >Yes, I want to renew now</label> 
    </span> 
    <span> 
      <input id="rad1_ExtendedHold" type="radio" name="action_21e7930b-31fd-e711-8d62-000c2979ba39" value="ExtendedHold" /> 
      <label for="rad1_ExtendedHold" >Not sure, keep my seat for the time being</label> 
    </span> 
  </div> 
</div> 
<div class="subsRenewEntry"> 
  <div class="seriesOptions" data-default="Renewed"> 
    <span> 
      <input id="rad2_Renewed" type="radio" name="action_d1b6d498-99da-e711-8d62-000c2979ba39" value="Renewed" /> 
      <label for="rad2_Renewed" >Yes, I want to renew now</label> 
    </span> 
    <span> 
      <input id="rad2_ExtendedHold" type="radio" name="action_d1b6d498-99da-e711-8d62-000c2979ba39" value="ExtendedHold" /> 
      <label for="rad2_ExtendedHold" >Not sure, keep my seat for the time being</label> 
    </span> 
  </div> 
</div> 
<div class="subsRenewEntry"> 
  <div class="seriesOptions" data-default="Renewed"> 
    <span> 
      <input id="rad3_Renewed" type="radio" name="action_3fe94663-32fd-e711-8d62-000c2979ba39" value="Renewed" /> 
      <label for="rad3_Renewed" >Yes, I want to renew now</label> 
    </span> 
    <span> 
      <input id="rad3_ExtendedHold" type="radio" name="action_3fe94663-32fd-e711-8d62-000c2979ba39" value="ExtendedHold" /> 
      <label for="rad3_ExtendedHold" >Not sure, keep my seat for the time being</label> 
    </span> 
  </div> 
</div> 
<div class="subsRenewEntry"> 
  <div class="seriesOptions" data-default="Renewed"> 
    <span> 
      <input id="rad4_Renewed" type="radio" name="action_f6fe26d5-32fd-e711-8d62-000c2979ba39" value="Renewed" /> 
      <label for="rad4_Renewed" >Yes, I want to renew now</label> 
    </span> 
    <span> 
      <input id="rad4_ExtendedHold" type="radio" name="action_f6fe26d5-32fd-e711-8d62-000c2979ba39" value="ExtendedHold" /> 
      <label for="rad4_ExtendedHold" >Not sure, keep my seat for the time being</label> 
    </span> 
  </div> 
</div> 
<div class="buttonsFooter"> 
  <button type="submit" class="small_button_a"> Proceed </button> 
</div>

嘿，你的思路其实已经对了一半，只是在遍历分组的时候，没有精准定位到每组里的目标单选按钮而已。给你几个实用方向参考：

• 利用分组层级精准定位：既然每个.subsRenewEntry是独立的分组容器，在each遍历它时，直接用$(this)代表当前分组，然后在这个容器内部查找目标元素就行。完全不用去拼ID或者依赖动态的name值——比如可以用$(this).find('input[value="ExtendedHold"]')直接定位到当前组里的目标单选按钮，这样不管name怎么变都能命中。

• 区分prop和attr的用法：设置单选按钮的选中状态时，优先用prop('checked', true)而非attr('checked', true)。因为checked是元素的状态属性（property），prop方法专门用来处理这类动态状态，在jQuery新版本里更可靠。

• 按钮禁用/启用的逻辑设计：

  1. 页面加载完成后，先把.buttonsFooter里的按钮设为禁用状态（用prop('disabled', true)）；
  2. 给所有单选按钮绑定change事件——只要用户修改了任意一个选项，就触发按钮启用的逻辑（prop('disabled', false)）。如果需要更严格的校验（比如要求所有组都修改过），可以在事件里遍历所有分组，检查每个组的选中值是否和默认值不同，再决定是否启用按钮。

• 简化选择器的另一种思路：如果每组的第二个单选按钮固定是目标选项，也可以用索引来定位，比如$(this).find('input[type="radio"]:eq(1)')（:eq(1)表示取索引为1的元素，也就是第二个），这样不用依赖value值，灵活性更强。

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