获取复选框，如果选择了某个项目，以显示 [英] Getting checkbox to display if certain item is selected

问题描述

在我的 Create.cshtml 的网页我有一个DropDownList：

 ＆LT; D​​IV CLASS =表单组＆GT;
        @ Html.LabelFor（型号=＆GT; model.activityID，分配，htmlAttributes：新{@class =控制标签COL-MD-2所需的}）
        ＆LT; D​​IV CLASS =COL-MD-10＆GT;
            @ Html.DropDownList（activityID空 - 选择活动 - htmlAttributes：新{@class =表格控}）
            @ Html.ValidationMessageFor（型号=＆GT; model.activityID，空，新的{@class =TEXT-危险}）
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
 

和基于用户的选择，我需要一个复选框是否被选择一个特定项目显示

 ＆LT; D​​IV CLASS =表单组＆GT;
        @ Html.LabelFor（型号=＆GT; model.chkbx，检查：htmlAttributes：新{@class =控制标签COL-MD-2}）
        ＆LT; D​​IV CLASS =COL-MD-10＆GT;
            ＆LT; D​​IV CLASS =复选框＆GT;
                @ Html.EditorFor（型号=＆GT; model.chkbx）
                @ Html.ValidationMessageFor（型号=＆GT; model.chkbx，新{@class =TEXT-危险}）
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
 

我知道这需要JavaScript，但我不确定如何基于DropDownList中的选择来写吧。

任何帮助是AP preciated。

更新：

JS：

  $（文件）。就绪（函数（）{    $（＃chkbox），隐藏（）。    $（'＃activityID'）。改变（函数（）{
        VAR selectedActivity = $（本）.VAL（）;
        $（'＃chkbox'）隐藏（）。
        如果（selectedActivity ===人）{
            $（'＃chkbox）显示（）。
        }
    }）;
}）;
 

剃刀：

 ＆LT; D​​IV ID =activityID级=表单组＆GT;
        @ Html.LabelFor（型号=＆GT; model.activityID，分配，htmlAttributes：新{@class =控制标签COL-MD-2所需的}）
        ＆LT; D​​IV CLASS =COL-MD-10＆GT;
            @ Html.DropDownList（activityID空 - 选择活动 - htmlAttributes：新{@class =表格控}）
            @ Html.ValidationMessageFor（型号=＆GT; model.activityID，空，新的{@class =TEXT-危险}）
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;＆LT; D​​IV ID =chkbox级=表单组＆GT;
        @ Html.LabelFor（型号=＆GT; model.chkbx，htmlAttributes：新{@class =控制标签COL-MD-2}）
        ＆LT; D​​IV CLASS =COL-MD-10＆GT;
            ＆LT; D​​IV CLASS =复选框＆GT;
                @ Html.EditorFor（型号=＆GT; model.chkbx）
                @ Html.ValidationMessageFor（型号=＆GT; model.chkbx，新{@class =TEXT-危险}）
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
 

解决方案

您需要听变更下拉的情况下，获得所选择的价值和隐藏/显示其他形式的控制。

下面code假定您已经jQuery的在你的页面加载。

  $（函数（）{
   $（＃chkbx），隐藏（）。 //隐藏在最初   $（＃activityID）。改变（函数（）{
      VAR selectedActivity = $（本）.VAL（）;
      $（＃chkbx），隐藏（）。
      如果（selectedActivity ===SomethingYouExpect）
      {
        $（＃chkbx）显示（）。
      }
   }）;}）;
 

修改 SomethingYouExpect 您的具体数值要核对。

On my Create.cshtml page I have a dropdownlist:

<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>

And based on the selection of the user, I need a checkbox to appear if a specific item is chosen.

<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>

I know that this requires JavaScript, but I am unsure of how to write it based on the selection of the dropdownlist.

Any help is appreciated.

UPDATE:

JS:

$(document).ready(function () {

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

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

Razor:

<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>

解决方案

You need to listen to the change event of the dropdown, get the selected value and hide/show the other form control.

The below code assumes you have jQuery loaded in your page.

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

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

});

Change SomethingYouExpect to your specific value you want to check against.

这篇关于获取复选框，如果选择了某个项目，以显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！