时间戳

首页 > 解决方案 > MVC5 基于另一个文本框值禁用文本框

c#-4.0 - MVC5 基于另一个文本框值禁用文本框

问题描述

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

根据 textBox1 中的值，我想禁用 TextBox3 和 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>

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

谢谢先生

标签： c#-4.0asp.net-mvc-5

解决方案

执行此操作的最佳方法可能是使用 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)

只需在您的 ViewModel 中将 FrequencyList 定义为包含所有潜在值的列表，我假设它们只是 Weekly 和 BiWeekly

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

JavaScript 可以保持不变。

推荐阅读