When I select the radio button, it does not actually get clicked and the status of other buttons remains unchanged.
The CSS code being used is as follows:
input[type="radio"]
{
display:none;
}
input[type="radio"] + label
{
height: 20px;
display:block;
padding: 0 0 0 0px;
vertical-align:top;
}
input[type="radio"] + label::before {
content: url("../../../Content/images/Icons/radiounchecked.png");
width: 20px;
height: 20px;
padding-right: 3px;
}
input[type="radio"]:checked + label::before {
content: url("../../../Content/images/Icons/radiochecked.png");
}
This issue is occurring in an MVC 4 project where the radio buttons are being created using the following code:
@Html.RadioButtonFor(Function(m) m.Variations(j).SelectedVariationID, Model.Variations(j).Options(i).OptionID )
The generated HTML codes for the radio buttons are as shown below:
<input checked="true" id="Variations_0__SelectedVariationID" name="Variations[0].SelectedVariationID" type="radio" value="77">
<label for="77">Siyah Çikolata $0.00</label>