3

私のアプリケーションには、うまく機能するlistboxforがあります。しかし、複数選択するには、Ctrl キーを押しながら項目をクリックする必要があります。この動作を変更するにはどうすればよいですか。リスト内の項目をクリックするたびに選択され、もう一度押すと選択解除されますが、選択された項目の 1 つだけです。

私のリストボックス：

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

それとも、この目的のために別のコントロールを使用する必要がありますか?

どうもありがとう

4

2 に答える 2

5

以前にBootstrap Multiselectを使用したことがあり、大きな成功を収めました。

ドロップダウンできない場合は、代わりにこのチェックボックス リストを使用してください。

于 2013-08-04T18:23:03.290 に答える
1

ユーザーがCtrlボタンを押して複数の要素を選択する必要のない、見栄えの良いリストボックスを完成させることができました。私の作品をあなたと共有したいと思います。私は、MartinHN によって提案された素晴らしい拡張 CheckBoxListFor を使用しました。この Web サイト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-07T11:06:20.440 に答える