Getting checkbox to display if certain item is sel

Question

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>

Answer 1

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.

Answer 2

You can use the display property to show/hide the checkbox:

document.getElementById("chkbx").style.display = 'none';
document.getElementById("chkbx").style.display = 'block';

Here is an example using a regular list that will display a checkbox if the a particular activity has been selected using the change event:

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