MVC ListBoxFor多選無控制按鈕

我有我的應用程序中的listboxfor偉大工程。但要做出多個選擇，我需要按Ctrl並點擊該項目。我怎樣才能改變這種行爲，所以每次點擊列表中的項目時，都會選擇它，再次按下時，它將取消選擇，但只有一個選定的項目。MVC ListBoxFor多選無控制按鈕

我的列表框：

@Html.ListBoxFor(m => m.selectedCharts, new SelectList(@Model.Graphs.ToList()) 
                , new { @class = "select_change" } 
       )

或者，也許我應該使用不同的控制用於此目的？

非常感謝

來源

2013-08-04 Whistler

我用Bootstrap Multiselect之前，大獲成功。

如果它不能下拉，請改用Checkbox list。

來源

2013-08-04 18:23:03 MartinHN

這是很酷的東西，並明確使用它在不久的將來，但此刻我正在尋找一個解決方案列表不下拉列表。 – Whistler

然後我只能想到像複選框列表：http://www.codeproject.com/Articles/292050/CheckBoxList-For-A-missing-MVC-extension – MartinHN

這個擴展是驚人的。非常感謝 – Whistler

我已經成功地完成了一個不錯的列表框，用戶不需要按Ctrl鍵來選擇多個元素。我想和你分享我的工作。我曾經使用MartinHN提出的一個驚人的擴展CheckBoxListFor。你可以在這個網站上找到它MvcCheckBoxList。

我查看代碼

@{ 
    var htmlListInfo = new HtmlListInfo(HtmlTag.vertical_columns, 0 , new { @class="styled_list" }); 
         @Html.CheckBoxListFor(model => model.ReportSettings.Ids, 
               model => model.AvailableGraphs, 
               graph => graph.Id, 
               graph => graph.Name, 
               model => model.SelectedGraphs, 
               new { @class="styled_checkbox" }, 
               htmlListInfo, 
               null, 
               x => x.Name) 
     }

我的CSS：

input.styled_checkbox, input[type="checkbox"] 
    { 
    visibility: hidden; 
    width: 0px; 
    } 
.styled_list 
{ 
    background: #aeeefb; 
    border-radius:5px; 
    padding: 10px 10px 10px 0; 
    color: White; 
    font-weight: bold; 
} 
.styled_checkbox 
{ 
    background: #69D2E7; 
    cursor: pointer; 
    display: inline-block; 
    vertical-align: middle; 
    margin: 3px 0 3px 0; 
    padding: 5px; 
    position: relative; 
    width: 250px; 
    border-radius:5px; 
} 
.styled_checkbox:hover 
{ 
    opacity: 0.7; 
} 
.styled_checkbox:checked+label 
{ 
    background: #1a9eed; 
}

的複選框被隱藏和標籤表示該元件被選中與否。我無法插入圖片，但看起來不錯，但您可以根據自己的需要編輯樣式。

希望幫助任何人

來源

2013-08-07 11:06:20 Whistler

MVC ListBoxFor多選無控制按鈕

回答

相關問題