在用户从DropDownListFor中选择值后禁用TextBoxFor

Disable TextBoxFor after User selects a value from a DropDownListFor

本文关键字：TextBoxFor 选择 用户 DropDownListFor      更新时间：2023-09-26

在用户从DropDownListFor中选择了某个值后，我试图禁用2个TextBoxFor元素。我写了一个javascript函数，但不知何故它不起作用：这是代码：

@model MvcAcpplication.ViewModels.CalendarViewModel
@{
    ViewBag.Title = "Calendar";
}
<h3 class="page-title">@ViewBag.Title</h3>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" />
<link href="@Url.Content("~/assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.css")"rel="stylesheet" type="text/css"/>

<ul class="breadcrumb">
    <li>
        <i class="icon-home"></i>
        <a href="Index">@ViewBag.Title</a>
        <i class="icon-angle-right"></i>
    </li>
    <li>
        <a href="#">Create new calendar entry</a>
</ul>
<script src="@Url.Content("~/assets/plugins/jquery-1.10.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm())
{ @Html.ValidationSummary(true)
    <div class="form-horizontal form-view">
        <h3>@ViewBag.Title </h3>
        <h3 class="form-section">General</h3>
        <div class="row-fluid">
            <div class="span6 ">
                <div class="control-group">
                    <label class="control-label">*Title:</label>
                    <div class="controls">
                        <span class="text">@Html.EditorFor(model => model.title)
                            @Html.ValidationMessageFor(model => model.title)
                        </span>
                    </div>
                </div>
            </div>
            <!--/span-->
        </div>
        <div class="row-fluid">
            <div class="span6 ">
                <div class="control-group">
                    <label class="control-label">*Start:</label>
                    <div class="controls">
                        @(new HtmlString(@Html.TextBoxFor(model => model.start, new { id = "datepicker_start" }).ToString()))
                        @Html.ValidationMessageFor(model => model.start)
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span6 ">
                <div class="control-group">
                    <label class="control-label">*End:</label>
                    <div class="controls">
                        @(new HtmlString(@Html.TextBoxFor(model => model.end, new { id = "datepicker_end" }).ToString()))
                        @Html.ValidationMessageFor(model => model.end)
                    </div>
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span6 ">
                <div class="control-group">
                    <label class="control-label">Time Start:</label>
                    <div class="controls">
                        @(new HtmlString(@Html.TextBoxFor(model => model.time_start, new { @placeholder = "08:00 AM", id = "time_start" }).ToString()))
                        @Html.ValidationMessageFor(model => model.time_start)
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span6 ">
                <div class="control-group">
                    <label class="control-label">Time End:</label>
                    <div class="controls">
                        @(new HtmlString(@Html.TextBoxFor(model => model.time_end, new { @placeholder = "01:00 PM", id = "time_end" }).ToString()))
                        @Html.ValidationMessageFor(model => model.time_end)
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span6 ">
                <div class="control-group">
                    <label class="control-label">Allday Event:</label>
                    <div class="controls">
                        @Html.DropDownListFor(model => model.allDay,
                                                      new SelectList(
                                                      new List<Object>{ 
                                                      new { value = "" , text = "Select"  },
                                                      new { value = "true" , text = "Yes" },
                                                      new { value = "false" , text = "No"}
                                                      }, "value", "text", "-"), new { id = "allDay" })
                        @Html.ValidationMessageFor(model => model.allDay)
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-actions">
        <div class="row-fluid">
            <div class="span2 responsive" data-tablet="span2 fix-margin" data-desktop="span2">
                <label class="control-label"></label>
                <div class="controls">
                    <p>
                        <a href="@Url.Content("~/Calendar/Index")"  class="btn green big btn-block">Back 
                                              <i class=" icon-chevron-left"></i>
                        </a>
                    </p>
                </div>
            </div>
            <div class="span2 responsive" data-tablet="span2 fix-margin" data-desktop="span2">
                <label class="control-label"></label>
                <div class="controls">
                    <p>
                        <button type="submit" class="btn blue big btn-block">
                            Create 
                                                  <i class="icon-plus"></i>
                        </button>
                    </p>
                </div>
            </div>
        </div>
    </div>
}

<script>
    $(document).ready(function () {
        var date = new Date();
        $("#datepicker_start").datepicker({
            numberOfMonths: 1,
            minDate: date,
            onSelect: function (selected) {
                $("#datepicker_end").datepicker("option", "minDate", selected)
            }
        });
        $("#datepicker_end").datepicker({
            numberOfMonths: 1,
            minDate: date,
            onSelect: function (selected) {
                $("#datepicker_start").datepicker("option", "maxDate", selected)
            }
        });
        function disableTextBox() {
            var allDay = document.getElementById("allDay");
            var time_start = document.getElementById("time_start");
            var time_end = document.getElementById("time_end");
            if (allDay == "true") {
                time_start.disabled = true;
                time_end.disabled = true;
            }
        }
    });
</script>

非常感谢在这个问题上提供的任何帮助非常感谢

您有函数disableTextBox的声明，这对执行任务很好，但我看不出您在哪里调用它。如果您需要在dropDownList的值更改时调用它，则需要将其作为更改事件的处理程序调用：

$("#allDay").change(disableTextBox);

但我认为你应该使用jQuery并尝试这样的东西：

$("#allDay").change(function(){
   if($(this).val() == "true")
   {
      $("#datepicker_start").attr("disabled", "disabled");
      $("#datepicker_end").attr("disabled", "disabled");
   }
});

有关禁用元素的更多信息，请参阅本文。

相关文章：