我有一个页面显示 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;
}
最佳答案
问题出在那部分代码
<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]。
关于html - 单选按钮的样式导致页面上第一个表单之外的表单变得无响应。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27528672/