MVC中的兩個複選框，但一次只允許一個複選框

在我的模型中，我有兩個布爾屬性，Approved和Rejected。我希望它們作爲單選按鈕或MVC視圖上的複選框，但一次只想選擇一個。MVC中的兩個複選框，但一次只允許一個複選框

目前我的看法是這樣的：

<div class="form-group"> 
    @Html.LabelFor(model => model.Approved, htmlAttributes: new {@class = "control-label col-md-2"}) 
    <div class="col-md-2"> 
     <div class="checkbox"> 
      @Html.EditorFor(model => model.Approved, new { onclick="SingleCheckbox(this)" }) 
      @Html.ValidationMessageFor(model => model.Approved, "", new {@class = "text-danger"}) 
     </div> 
    </div> 
</div> 

<div class="form-group"> 
    @Html.LabelFor(model => model.Rejected, htmlAttributes: new { @class = "control-label col-md-2" }) 
    <div class="col-md-2"> 
     <div class="checkbox"> 
      @Html.EditorFor(model => model.Rejected, new { onclick="SingleCheckbox(this)" }) 
      @Html.ValidationMessageFor(model => model.Rejected, "", new { @class = "text-danger" }) 
     </div> 
    </div> 
</div>

和JavaScript看起來像這樣：

SingleCheckbox = function(rb) { 
    debugger; 
    var id = rb.id, uncheck; 
    if (id == 'Approved') { 
     uncheck = document.getElementById('Rejected'); 
    } else { 
     uncheck = document.getElementById('Approved'); 
    } 
};

但是，當我檢查的元素，它甚至沒有onclick事件。

我已更新我的代碼以反映您的建議（請參閱上文），但仍然存在相同的問題。問題是，當我檢查元素複選框輸入沒有一個onclick事件。

這裏呈現的HTML：

<div class="form-group"> 
    <label class="control-label col-md-2" for="Approved">Approved</label> 
    <div class="col-md-2"> 
     <div class="checkbox"> 
      <input class="check-box" id="Approved" name="Approved" type="checkbox" value="true"><input name="Approved" type="hidden" value="false"> 
      <span class="field-validation-valid text-danger" data-valmsg-for="Approved" data-valmsg-replace="true"></span> 
     </div> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="control-label col-md-2" for="Rejected">Rejected</label> 
    <div class="col-md-2"> 
     <div class="checkbox"> 
      <input class="check-box" id="Rejected" name="Rejected" type="checkbox" value="true"><input name="Rejected" type="hidden" value="false"> 
      <span class="field-validation-valid text-danger" data-valmsg-for="Rejected" data-valmsg-replace="true"></span> 
     </div> 
    </div> 
</div>

來源

2015-12-04 M Kenyon II

這是您的原始問題的附註，但我認爲如果您使用單選按鈕，則可以解決您的問題並獲得更好的用戶體驗。複選框意味着允許多個選擇（即它們通常包含諸如_「檢查所有適用的」的短語_）。另一方面，單選按鈕是專門爲***一次且只能選擇一個***選項而設計的...... – War10ck

您可以顯示使用2個單獨bool的單選按鈕的示例嗎？ –

如果這兩個值是互斥的，那麼你有設計問題。你應該擁有一個單獨的屬性（比如說）'狀態'（'string'或'enum'）並使用單選按鈕並避免不必要的腳本（並且需要在服務器上再次重複驗證） –

呼叫SingleCheckbox(this)，而不是在chackbox的onclickSingleCheckbox.call(this)像以下。

@Html.CheckBoxFor(model => model.Approved, new { onclick = "SingleCheckbox(this)" }) 
@Html.CheckBoxFor(model => model.Rejected, new { onclick = "SingleCheckbox(this)" })

和SingleCheckbox應該像下面那樣。

var SingleCheckbox = function (rb) { 
    var id = rb.id, uncheck; 
    if (id == 'Approved') { 
     uncheck = document.getElementById('Rejected'); 
    } else { 
     uncheck = document.getElementById('Approved'); 
    } 

    uncheck.checked = false; 
}

更新：在asp.net mvc4和它的早期版本@Html.EditorFor有htmlAtrributes沒有參數。您可以改用@Html.CheckBoxFor。

希望這會幫助你。

來源

2015-12-04 18:03:47 Azim

它沒有。我最初的問題仍然存在。當頁面呈現時，它不包含onclick。我得到這個：'

' –

@Azim你不覺得它應該是這樣的：new {@onclick ='「SingleCheckbox（this）」'} – Raider

試試這個希望這將使具有的onclick它

@Html.EditorFor(model => model.Approved, new { @onclick = '"SingleCheckbox.call(this)"' })

來源

2015-12-04 18:26:34 Raider

這個問題似乎是與@Html.EditorFor幫手所需的標記。我改變了我的代碼，現在它正在工作。

<div class="form-group"> 
    @Html.LabelFor(model => model.Approved, htmlAttributes: new {@class = "control-label col-md-2"}) 
    <div class="col-md-2"> 
     @Html.CheckBoxFor(model => model.Approved, new { onclick = "SingleCheckbox(this)" }) 
     @Html.ValidationMessageFor(model => model.Approved, "", new {@class = "text-danger"}) 
    </div> 
</div> 

<div class="form-group"> 
    @Html.LabelFor(model => model.Rejected, htmlAttributes: new { @class = "control-label col-md-2" }) 
    <div class="col-md-2"> 
     @Html.CheckBoxFor(model => model.Rejected, new { onclick = "SingleCheckbox(this)" }) 
     @Html.ValidationMessageFor(model => model.Rejected, "", new {@class = "text-danger"}) 
    </div> 
</div>

我只需要更新JavaScript是更通用的，我可能希望在網站的其他領域使用它。

來源

2015-12-04 18:29:00

MVC中的兩個複選框，但一次只允許一個複選框

回答

相關問題