foreach循环中两组星级评分单选按钮联动异常排查

你的五星评分组件出现两组互斥的问题，核心原因有两个：Radio按钮ID全局重复导致浏览器混淆了标签与按钮的关联，加上CSS选择器逻辑错误加剧了视觉混乱。下面是具体修复步骤：

1. 修正Radio的ID和Label的关联属性 #

HTML要求所有元素的id必须全局唯一，你当前两个问题组里的Radio ID都是cm_star-1到cm_star-5，点击第二个问题的标签时，浏览器会错误触发第一个问题中同ID的Radio，造成互斥假象。

修改视图代码，给id和for属性加上问题ID前缀，保证唯一性：

@foreach (var pergunta in Model.ls_pergunta) { 
<div class="form-group has-feedback"> 
<div class="col-xs-12"> 
<label for="co_pergunta_avaliacao" class="control-label">@pergunta.tx_pergunta</label> 
</div> 
<div class="col-xs-8"> 
<div class="estrelas" id="pergunta_@pergunta.co_pergunta"> 
@{ int i = 1; foreach (var item in @pergunta.ls_opcoes) { 
<!-- 新增问题ID前缀，确保ID全局唯一 -->
<label for="cm_star-@pergunta.co_pergunta-@i"><i class="fa"></i></label> 
<input type="radio" id="cm_star-@pergunta.co_pergunta-@i" name="pergunta_@pergunta.co_pergunta" value=@item.Value /> 
i++; } } 
</div> 
</div> 
</div> 

2. 调整CSS样式，修复评分视觉逻辑 #

原CSS的选择器逻辑与DOM结构不匹配，且视觉效果与常规五星评分相反。我们可以通过Flex反向排列容器，让兄弟选择器正确控制星星的颜色：

.estrelas {
  /* 反向排列DOM元素，视觉上保持从左到右的星星顺序 */
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.estrelas input[type=radio] { 
  display: none; 
} 
.estrelas label {
  cursor: pointer;
}
/* 默认所有星星为黄色 */
.estrelas label i.fa:before { 
  content:'\f005'; 
  color: #FC0; 
  font-size:40px; 
} 
/* 选中Radio后的所有Label（视觉上是左侧的星星）保持黄色，右侧的变灰 */
.estrelas input[type=radio]:checked ~ label i.fa:before { 
  color: #CCC; 
}

修复原理说明 #

• 修正ID后，每个Radio和对应的Label都有唯一标识，浏览器能正确区分不同问题组的元素，两组Radio的选中状态不再互相干扰。
• Flex反向排列让DOM结构与视觉顺序分离，配合~兄弟选择器，实现了“选中某颗星星后，其左侧所有星星保持黄色，右侧变灰”的常规五星评分逻辑。

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