title: Show/hide control based on dropdown selection mvc 4 razor c#
body: <p>Here is my code</p>
  
  <pre><code>@Html.DropDownListFor(z =&gt; z.SelectedReportId, new SelectList(Model.ReportTypes, "Value", "Text", Model.SelectedReportId), "-- Select Report --")
  @Html.CheckBoxFor(model =&gt; model.IncludePhotos)@Html.LabelFor(model =&gt; model.IncludePhotos)
  </code></pre>
  
  <p>Which generates:</p>
  
  <pre><code>&lt;select data-val="true" data-val-number="The field SelectedReportId must be a number." data-val-required="The SelectedReportId field is required." id="SelectedReportId" name="SelectedReportId"&gt;
      &lt;option value=""&gt;-- Select Report --&lt;/option&gt;
      &lt;option value="1"&gt;Excel Report&lt;/option&gt;
      &lt;option value="2"&gt;Text Report&lt;/option&gt;
  &lt;/select&gt;
  &lt;br /&gt;
  &lt;input data-val="true" data-val-required="The Include photos in the report field is required." id="IncludePhotos" name="IncludePhotos" type="checkbox" value="true" /&gt;
  </code></pre>
  
  <p>I have one dropdown and a checkbox, I need to disable the checkbox if the user selects the first value in dropdown. 
  Here is the javascript I am using without success</p>
  
  <pre><code>$(function () {
      $('#SelectedReportId').change(function () {
          var value = $(this).val();
          if (value == '1') {
              $('#IncludePhotos').show();
          } else {
              $('#IncludePhotos').hide();
          }
      });
  });
  </code></pre>
  
  <p>Appreciate any help, thank you</p>