MVC5 基于另一个文本框值禁用文本框

Question

我有一个能够创建的 mvc5 项目;编辑和删除记录。 有 3 个文本框。

根据文本框 1 中的值，我想禁用文本框 3 和 4;

if frequency.Value='Weekly' 
{
Disable TextBox_BiWeekly 
Enable TextBox3_Weekly
}
if frequency.Value='BiWeekly'
{
Disable TextBox3_Weekly
Enable TextBox4_BiWeekly
}

这是 Edit.cshtml 中代码的一部分

<div class="form-group">
@Html.LabelFor(model => model.frequency, htmlAttributes: new { @class = ".col-form-label col-md-2" })
<div class="col-md-10">
<div class="form-check">
@Html.EditorFor(model =>model.frequency)
@Html.ValidationMessageFor(model =>model.frequency, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Weekly, htmlAttributes: new { @class = ".col-form-label col-md-2" })
<div class="col-md-10">
<div class="form-check">
@Html.EditorFor(model =>model.Weekly)
@Html.ValidationMessageFor(model =>model.Weekly, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.BiWeekly, htmlAttributes: new { @class = ".col-form-label col-md-2" })
<div class="col-md-10">
<div class="form-check">
@Html.EditorFor(model =>model.BiWeekly)
@Html.ValidationMessageFor(model =>model.BiWeekly, "", new { @class = "text-danger" })
</div>
</div>
</div>

我不确定如何禁用或启用文本框

谢谢先生

Answer 1

可能最好的方法是在 JavaScript 中，以便文本框可以根据频率输入的值动态启用/禁用。

像这样：

$(function() {
EnableDisableFrequency();
$('#Frequency').change(function() {
EnableDisableFrequency();    
});
});
function EnableDisableFrequency() {
if ($('#Frequency').val() === "Weekly") {
$('#BiWeekly').prop('disabled', true);
$('#Weekly').prop('disabled', false);
} else if ($('#Frequency').val() === "BiWeekly") {
$('#BiWeekly').prop('disabled', false);
$('#Weekly').prop('disabled', true);    
}
}

我的JavaScript有点生疏，但我很确定这应该可以工作。 但是，我同意Stephen Muecke的观点，即您的频率输入应该是一个下拉列表。

@Html.DropDownListFor(m => m.Frequency, Model.FrequencyList)

只需将视图模型中的 FrequencyList 定义为包含所有潜在值的列表，我认为这些值只是每周和每两周一次

FrequencyList = new List<SelectListItem>
{
new SelectListItem
{
Text = "Weekly",
Value = "Weekly"
},
new SelectListItem
{
Text = "BiWeekly",
Value = "BiWeekly"
}
};

JavaScript 可以保持不变。