Question

在我的 Create.cshtml 页面上，我有一个下拉列表：

<div class="form-group">
        @Html.LabelFor(model => model.activityID, "Assignment", htmlAttributes: new { @class = "control-label col-md-2 required" })
        <div class="col-md-10">
            @Html.DropDownList("activityID", null, "-- Select Activity --", htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.activityID, null, new { @class = "text-danger" })
        </div>
    </div>

根据用户的选择，如果选择了特定项目，我需要一个复选框。

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

我知道这需要JavaScript，但我不确定如何根据下拉列表的选择来编写它。

感谢任何帮助。

更新：

JS：

$(document).ready(function () {

    $("#chkbox").hide();

    $('#activityID').change(function () {
        var selectedActivity = $(this).val();
        $('#chkbox').hide();
        if (selectedActivity === "Persons") {
            $('#chkbox').show();
        }
    });    
});

剃刀：

<div id="activityID" class="form-group">
        @Html.LabelFor(model => model.activityID, "Assignment", htmlAttributes: new { @class = "control-label col-md-2 required" })
        <div class="col-md-10">
            @Html.DropDownList("activityID", null, "-- Select Activity --", htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.activityID, null, new { @class = "text-danger" })
        </div>
    </div>



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

Answer 1

您需要收听下拉菜单的change事件，获取所选值并隐藏/显示其他表单控件。

以下代码假设您在页面中加载了jQuery。

$(function(){
   $("#chkbx").hide();   // hide initially on

   $("#activityID").change(function(){
      var selectedActivity = $(this).val();
      $("#chkbx").hide();
      if(selectedActivity==="SomethingYouExpect")
      {
        $("#chkbx").show();
      }
   });

});

将SomethingYouExpect更改为您要检查的特定值。

Answer 2

您可以使用display属性显示/隐藏复选框：

{{1}}

以下是使用常规列表的示例，如果使用更改事件选择了特定活动，则会显示一个复选框：

http://jsfiddle.net/wbox6khc/38/

获取复选框以显示是否选择了某个项目

2 个答案: