我想基本上根据我的下拉列表中的选项禁用或隐藏可编辑的文本框。我有一个交付视图页面，其中包含我在模型上硬编码的状态，我还有单独的文本框，允许我为每个状态选择日期和时间。所有这些目前都显示在表格上。
根据可能是“Dispatched”，“Received”，“Delayed”的状态，我想禁用或隐藏（无论哪个选项是实用的）其他状态的相应日期和时间文本框。例如，如果我选择“已调度”，我想要禁用或隐藏delayed_date和delayed_time以及received_date和received_time文本框。这样，用户就可以专注于与他们选择的状态相关的文本框。
我将如何进行上述操作？我对此做了一些研究，但我不知道如何将它应用到我的情况。我对MVC很新，所以我正在寻找一种简单易懂的方法。有没有使用jQuery或Javascript的替代方案？提前谢谢！
交付模式：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
namespace HealthHabitat.Models
{
public enum Status
{
Delivered, Delayed, Dispatched
}
public class Delivery
{
public int DeliveryID { get; set; }
[Display(Name = "Driver")]
public string DriverID { get; set; }
public Status Status { get; set; }
[DisplayFormat(ConvertEmptyStringToNull = false)]
public string Comment { get; set; }
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
[Display(Name = "Date Dispatched")]
public DateTime Dispatched_Date { get; set; }
[DataType(DataType.Time)]
[DisplayFormat(DataFormatString = "{0:HH:mm}", ApplyFormatInEditMode = true)]
[Display(Name = "Time Dispatched")]
public DateTime Dispatched_Time { get; set; }
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
[Display(Name = "Date Received")]
public DateTime? Received_Date { get; set; }
[DataType(DataType.Time)]
[DisplayFormat(DataFormatString = "{0:HH:mm}", ApplyFormatInEditMode = true)]
[Display(Name = "Time Received")]
public DateTime? Received_Time { get; set; }
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
[Display(Name = "Date Delayed")]
public DateTime? Delayed_Date { get; set; }
[DataType(DataType.Time)]
[DisplayFormat(DataFormatString = "{0:HH:mm}", ApplyFormatInEditMode = true)]
[Display(Name = "Time Delayed")]
public DateTime? Delayed_Time { get; set; }
public virtual Driver Driver { get; set; }
public virtual ICollection<Order> Orders { get; set; }
}
}
创建投放视图：
@model HealthHabitat.Models.Delivery
@{
ViewBag.Title = "Create";
}
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Delivery</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.DriverID, "DriverID", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("DriverID", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.DriverID, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Status, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EnumDropDownListFor(model => model.Status, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Status, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Dispatched_Date, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Dispatched_Date, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Dispatched_Date, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Dispatched_Time, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Dispatched_Time, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Dispatched_Time, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Received_Date, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Received_Date, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Received_Date, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Received_Time, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Received_Time, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Received_Time, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Delayed_Date, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Delayed_Date, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Delayed_Date, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Delayed_Time, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Delayed_Time, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Delayed_Time, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Comment, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Comment, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Comment, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-success" />
</div>
</div>
</div>
}
<div>
<a href="~/Delivery/Index" class="btn btn-primary">Back</a>
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
答案 0 :(得分：2)
由于（我认为）下拉列表可以在不发布表单的情况下进行更改，因此JavaScript解决方案最适合。 jQuery应该让这很简单：
首先，正如@mahlatse建议的那样，将data-attribute添加到与枚举值匹配的所有form-group div中。另外，添加一些您选择的自定义类名称，例如section：
<div class="form-group section" data-attribute="1">
@Html.LabelFor(model => model.Dispatched_Date, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Dispatched_Date, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Dispatched_Date, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group section" data-attribute="1">
@Html.LabelFor(model => model.Dispatched_Time, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Dispatched_Time, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Dispatched_Time, "", new { @class = "text-danger" })
</div>
</div>
......等等。这将确保我们可以轻松准确地显示和隐藏每组div。 section类将确保我们稍后可以将所有这些div作为一个组引用。接下来，找到下拉列表的HTML ID（或为其分配一个），并挂钩jQuery事件处理程序：
$(document).ready(function() {
$('#dropdown-id-here').change(function(data) {
var selected = data.target.value;
switchUi(selected);
});
)};
.change()是jQuery将代码附加到控件的更改事件的方式。 CSS选择器#dropdown-id-here是如何知道将代码附加到哪个控件的。 data.target.value是所选下拉选项的字符串value。
接下来，帮助函数：
function switchUi(selection) {
$('div.section').filter('[data-attribute="' + selection + '"]').show();
$('div.section').not('[data-attribute="' + selection + '"]').hide();
}
第一行选择页面上带有section类的所有div，然后只查找具有data-attribute=<selected option value>的div。 .show()确保这些div可见。第二行只是颠倒了这个逻辑，并隐藏了没有当前所选选项的所有 div作为data-attribute。
我们还希望它在页面加载时关闭它，因此无论初始选择如何，下拉列表都会立即反映在页面上。在$(document).ready添加另一行：
$(document).ready(function() {
...
switchUi($('#dropdown-id-here').val());
});
这是一个简单的小提琴示例：http://jsfiddle.net/9f6nqcvt/3/
进一步的想法：
id的值。