html - 单选按钮的样式导致页面上第一个表单之外的表单变得无响应。

Question

我有一个页面显示 clients 的列表每个人都有一份 interests 的 list .查看 client 时interests 的列表您可以选择“添加新”，这会显示以前隐藏的表单以添加 interest或 event .

每个client interests 的列表在页面加载时隐藏了自己的表单。这些表单的单选按钮样式看起来像矩形(请参阅下面的 css)。

每种类型的第一个表单按预期工作，但后续表单不会明显响应选择选项的“点击”(即使我将单选按钮设置为可见 - 它们仍未选中)。但是，如果我单击该选项并单击“创建”，则表单将被提交，就像它被单击一样，并且适当的 interest已创建属于所选的 client .

我了解到，当我在一个明显没有响应的表单上单击选项时，当我返回第一个表单时，第一个表单上的选项会被选中。

当我删除我用来修改单选按钮行为的样式时，所有表单都按预期工作。

为什么下面的 css 会导致页面上后续呈现的表单无响应？

/*
  Hide radio button (the round disc)
  we will use just the label to create pushbutton effect
*/
input[type=radio] {
    display:none;
    margin:10px;
}

/*
  Change the look'n'feel of labels (which are adjacent to radiobuttons).
  Add some margin, padding to label
*/
input[type=radio] + label {
    display:inline-block;
    width: 50%;
    margin: 0px;
    padding: 4px 12px;
    background-color: #e7e7e7;
    border-color: #ddd;
}
/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
*/
input[type=radio]:checked + label {
   background-image: none;
    background-color:#d0d0d0;
}

这是一个演示链接:https://young-chamber-6910.herokuapp.com/

Answer 1

问题出在那部分代码

<span class="radio">
   <input class="radio_buttons optional" id="interest_condition_new" name="interest[condition]" type="radio" value="New">
   <label class="collection_radio_buttons" for="interest_condition_new">New</label>
</span>

在每一行中，输入的 [id] 属性相同；每行必须有不同的 [id]。