基于下拉选择mvc 4 razor c#的显示/隐藏控件答案

【问题标题】：Show/hide control based on dropdown selection mvc 4 razor c#基于下拉选择mvc 4 razor c#的显示/隐藏控件
【发布时间】：2015-04-19 19:54:10
【问题描述】：

这是我的代码

@Html.DropDownListFor(z => z.SelectedReportId, new SelectList(Model.ReportTypes, "Value", "Text", Model.SelectedReportId), "-- Select Report --")
@Html.CheckBoxFor(model => model.IncludePhotos)@Html.LabelFor(model => model.IncludePhotos)

生成：

<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">
    <option value="">-- Select Report --</option>
    <option value="1">Excel Report</option>
    <option value="2">Text Report</option>
</select>
<br />
<input data-val="true" data-val-required="The Include photos in the report field is required." id="IncludePhotos" name="IncludePhotos" type="checkbox" value="true" />

我有一个下拉列表和一个复选框，如果用户选择下拉列表中的第一个值，我需要禁用该复选框。这是我没有成功使用的javascript

$(function () {
    $('#SelectedReportId').change(function () {
        var value = $(this).val();
        if (value == '1') {
            $('#IncludePhotos').show();
        } else {
            $('#IncludePhotos').hide();
        }
    });
});

感谢任何帮助，谢谢

【问题讨论】：

你能显示剃刀代码实际生成的 HTML 吗？
你的 JavaScript 在做什么，如果有的话？
在this example 中看起来一切正常。您是否在页面上收到脚本错误？你确定 jQuery 被正确包含了吗？
我刚刚意识到我实际上并没有从任何地方调用 javascript 函数！在asp.net中我们使用onclientclick=""，如何调用razor中的函数？？
你不需要显式调用任何函数来运行change事件处理程序（除了jQuery来注册你已经在调用的事件处理程序）

标签： javascript c# asp.net-mvc razor

【解决方案1】：

在 @section scripts{} 部分中包含 javascript，它开始工作，

@section scripts{ <script type="text/javascript">
$(function () {
    $('#SelectedReportId').change(function () {
        var value = $(this).val();
        if (value == '1') {
            $('#IncludePhotos').show();
        } else {
            $('#IncludePhotos').hide();
        }
    });
});</script>}

【讨论】：

您确实意识到这只是显示/隐藏复选框 - 如果用户在选择选项之前选中它，它仍然会发布 true
查看this 了解更多选项，希望对某人有所帮助。

【解决方案2】：

试试这个

@Html.DropDownListFor(z => z.SelectedReportId, new SelectList(Model.ReportTypes, "Value", "Text", Model.SelectedReportId),new {id="myDropdown"}

@Html.CheckBoxFor(model => model.IncludePhotos,new {id="myCheckbox"})

$(function () {
    $('#myDropdown').change(function () {
        var value = $(this).val();
        var fistVal=$('#myDropdown option:first-child').attr("selected", "selected");
        if (value == fistVal) {
            $('#IncludePhotos').show();
        } else {
            $('#IncludePhotos').hide();
        }
    });
});

【讨论】：