ASP.NET MVC - 允許多個單選按鈕選擇，爲什麼？

Question

問題背景：

我在菜單中有兩組單選按鈕。其中一組功能包括2個單選按鈕，允許用戶選擇一組項目以按照「從高到低」或「從低到高」的價格排序和顯示。

第二組單選按鈕允許用戶從3個不同的在線市場搜索結果。

的問題：

目前單選按鈕（價格排序組）的第一組工作正常，如果我點擊「從高到低」那麼單選按鈕將被選中，如果我再選擇'低到高'將被選中。

第二組爲市場的3個單選按鈕導致我的問題。這讓所有三個單選按鈕來進行檢查，而不是僅僅一個，一旦所有選中的用戶無法取消選中它們，如下所示：

驗證碼：

這是我觀看的MarkUp。我正在使用RadioButtonsFor Razer控件將每個單選按鈕綁定到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> 

的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; } 
} 

單選按鈕的呈現在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 &amp; 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> 

任何determing爲什麼我收到的所有3個複選框選擇的幫助將非常感激。

Answer 1

非常基礎的集中和剛剛意識到，我爲每個屬性使用不同的模型值而不是一個普通的值。

Answer 2

如果你只想從一組單選按鈕中選擇一個，那麼你必須給它們一個共同的name，它們將它們組合在一起，並允許你從組中選擇一個。這個例子可以讓你選擇使用的Camaro或者野馬，但不是他們兩個，因爲它們具有相同的名稱，這意味着它們屬於同一個項目組：

<input type="radio" name="car"/> Camaro <br/> 
<input type="radio" name="car"/> Mustang <br/> 

這個例子會讓你選擇一個汽車（卡瑪洛或野馬）和一種顏色（黃色或綠色）：

<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

你所得到的市集組中選擇的所有三個複選框的原因是，你使用不同的名字爲這個按鈕組的各單選按鈕。所有應該相互排斥的按鈕應該是由一個標籤表示的一個組的一部分。此外，由於您要分別單獨聲明每個單選按鈕，因此我認爲不需要使用HtmlRadioButtonFor。只需嘗試對代碼進行以下更改即可。請注意，我命名你的單選按鈕組的「市集」：

驗證碼：

<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>