ASP.NET MVC - Multiple Radio Buttons selections being allowed, why? - asp.net-mvc

Question

Question Background:
I have two groups of Radio buttons in a menu. One group features 2 Radio buttons that allow a user to select a group of items to being sorted and displayed by their price either from 'High To Low' or 'Low To High'.
The second group of Radio buttons allows users to search for results from 3 different online marketplaces.
The Issue:
Currently the first group of Radio buttons (the price sort group) is working fine, if I click 'High To Low' then that Radio buttons will be selected, if I then select 'Low To High' this will be selected.
The second group with the 3 radio buttons for the marketplaces is causing me issues. This is allowing all three radio buttons to be checked instead of just one, and once all checked the user cannot unchecked them, as shown:
The Code:
this is the MarkUp in my View. I am using RadioButtonsFor Razer controls binding each Radio button to a specific property from the ViewModel.
<div class="form-group">
<div class="maxPricePad">
<label>#Html.RadioButtonFor(model => model.amazonAndEbay, true, new { id = "amazonEbayBox", #checked = "true" })<img class="originPic" src="#Url.Content("~/Images/amazon.png")" /> <img class="originPic" src="#Url.Content("~/Images/ebay.png")" /> Amazon & Ebay</label>
</div>
</div>
<div class="form-group">
<div class="maxPricePad">
<label>#Html.RadioButtonFor(model => model.amazonOnly, true, new { id = "amazonCheckBox" })<img class="originPic" src="#Url.Content("~/Images/amazon.png")" /> Amazon Only</label>
</div>
</div>
<div class="form-group">
<div class="maxPricePad">
<label>#Html.RadioButtonFor(model => model.ebayOnly, true, new { id = "ebayCheckBox" })<img class="originPic" src="#Url.Content("~/Images/ebay.png")" /> Ebay Only</label>
</div>
</div>
The HomePageVM:
public class HomePageVM
{
public bool highToLow { set; get; }
public bool lowToHigh { set; get; }
public bool amazonAndEbay { set; get; }
public bool amazonOnly { set; get; }
public bool ebayOnly { set; get; }
}
The Radio Buttons as rendered in Chrome:
<div class="form-group">
<div class=" maxPricePad">
<label>
<input checked="true" data-val="true" data-val-required="The amazonAndEbay field is required." id="amazonEbayBox" name="amazonAndEbay" type="radio" value="True"><img class="originPic" src="/Images/amazon.png"> <img class="originPic" src="/Images/ebay.png"> Amazon & Ebay</label>
</div>
</div>
<div class="form-group">
<div class=" maxPricePad">
<label>
<input data-val="true" data-val-required="The amazonOnly field is required." id="amazonCheckBox" name="amazonOnly" type="radio" value="True"><img class="originPic" src="/Images/amazon.png"> Amazon Only</label>
</div>
</div>
<div class="form-group">
<div class=" maxPricePad">
<label>
<input data-val="true" data-val-required="The ebayOnly field is required." id="ebayCheckBox" name="ebayOnly" type="radio" value="True"><img class="originPic" src="/Images/ebay.png"> Ebay Only</label>
</div>
</div>
Any help determing why I am getting all 3 checkboxes to select would be much appreciated.

Answer 1

Very sill lapse in concentration and just realized I'm using different models values for each property instead of one common one.

Answer 2

If you want only one selection from the group of radio buttons then you have to give them a common name, which will group them together and allow you to select only one from the group. The example lets you choose either Camaro or Mustang, but not both of them, since they have the same name, which means that they belong to the same group of items:
<input type="radio" name="car"/> Camaro <br/>
<input type="radio" name="car"/> Mustang <br/>
This example will let you choose one car (Camaro or Mustang) and one color (Yellow or Green):
<input type="radio" name="car"/> Camaro <br/>
<input type="radio" name="car"/> Mustang <br/>
<input type="radio" name="color"/> Yellow<br/>
<input type="radio" name="color"/> Green<br/>

Answer 3

The reason you are getting all three checkboxes selected in the Marketplaces group is that you're using separate names for each radio button in this button group. All buttons that ought to be mutually exclusive should be part of one group represented by one label. Also, since you're declaring each radio button separately and individually, I think there's no need to use HtmlRadioButtonFor. Simply try the following changes to your code. Note that I named your radio button group as, "Marketplaces":
The Code:
<div class="form-group">
<div class="maxPricePad">
<label>#Html.RadioButton("Marketplaces", model.amazonAndEbay, new { id = "amazonEbayBox", #checked = "true" })<img class="originPic" src="#Url.Content("~/Images/amazon.png")" /> <img class="originPic" src="#Url.Content("~/Images/ebay.png")" /> Amazon & Ebay</label>
</div>
</div>
<div class="form-group">
<div class="maxPricePad">
<label>#Html.RadioButton("Marketplaces", model.amazonOnly, new { id = "amazonCheckBox" })<img class="originPic" src="#Url.Content("~/Images/amazon.png")" /> Amazon Only</label>
</div>
</div>
<div class="form-group">
<div class="maxPricePad">
<label>#Html.RadioButton("Marketplaces", model.ebayOnly, new { id = "ebayCheckBox" })<img class="originPic" src="#Url.Content("~/Images/ebay.png")" /> Ebay Only</label>
</div>
</div>