Question

我的应用程序中有一个列表框，可以很好地运行。但要进行多项选择，我需要按ctrl并单击该项目。如何更改此行为，因此每次单击列表中的项目时，它都会选择它，再次按下它时会取消选择但只会选择其中一个项目。

我的列表框：

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

或许我应该为此目的使用不同的控制？

非常感谢

Answer 1

我之前使用过Bootstrap Multiselect，取得了巨大的成功。

如果无法下拉，请改用此Checkbox list。

Answer 2

我设法完成一个漂亮的列表框，用户无需按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;  
}

隐藏复选框，标签表示选择了元素。我无法插入图片，但看起来不错，但您可以根据自己的需要编辑样式。

希望能帮到任何人

MVC ListBox对于没有ctrl按钮的多选

2 个答案: