Javascript 在用户从DropDownListFor中选择值后禁用TextBoxFor_Javascript_Asp.net Mvc_Razor

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

javascript asp.net-mvc razor

Javascript 在用户从DropDownListFor中选择值后禁用TextBoxFor,javascript,asp.net-mvc,razor,Javascript,Asp.net Mvc,Razor,在用户从DropDownListFor中选择某个值后，我尝试禁用2个TextBoxFor元素。我编写了一个javascript函数，但不知何故它不起作用：代码如下： @model MvcAcpplication.ViewModels.CalendarViewModel @{ ViewBag.Title = "Calendar"; } <h3 class="page-title">@ViewBag.Title</h3> <link href="@Url.C

在用户从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>

@model mvcacapplication.ViewModels.CalendarViewModel
@{
ViewBag.Title=“日历”；
}
@视图包。标题





@使用（Html.BeginForm（））
{@Html.ValidationSummary（true）
@视图包。标题
一般的
*标题：
@EditorFor（model=>model.title）
@Html.ValidationMessageFor（model=>model.title）
*开始：
@（新的HtmlString（@Html.TextBoxFor（model=>model.start，new{id=“datepicker\u start”}）.ToString（））
@Html.ValidationMessageFor（model=>model.start）
*完:
@（新的HtmlString（@Html.TextBoxFor（model=>model.end，new{id=“datepicker\u end”}）.ToString（））
@Html.ValidationMessageFor（model=>model.end）
开始时间：
@（新的HtmlString（@Html.TextBoxFor（model=>model.time\u start，new{@placeholder=“08:00am”，id=“time\u start”}）.ToString（））
@Html.ValidationMessageFor（model=>model.time\u start）
时间结束：
@（新的HtmlString（@Html.TextBoxFor（model=>model.time\u end，new{@placeholder=“01:00pm”，id=“time\u end”}）.ToString（））
@Html.ValidationMessageFor（model=>model.time\u end）
全天活动：
@Html.DropDownListFor（model=>model.allDay，
新选择列表(
新列表{
新建{value=”“，text=“Select”}，
新的{value=“true”，text=“Yes”}，
新建{value=“false”，text=“No”}
}，“值”，“文本”，“-”，新的{id=“allDay”}）
@Html.ValidationMessageFor（model=>model.allDay）



创造

}
$（文档）.ready（函数（）{
变量日期=新日期（）；
$（“#日期选择器_开始”）。日期选择器({
月数：1，
日期：，
onSelect：功能（已选择）{
$（“#日期选择器_end”）。日期选择器（“选项”，“minDate”，选中）
}
});
$（“#日期选择器_end”）。日期选择器({
月数：1，
日期：，
onSelect：功能（已选择）{
$（“#日期选择器_开始”）。日期选择器（“选项”，“maxDate”，选中）
}
});
函数disableTextBox（）{
var allDay=document.getElementById（“allDay”）；
var time_start=document.getElementById（“time_start”）；
var time_end=document.getElementById（“time_end”）；
如果（全天==“真”）{
time_start.disabled=真；
time_end.disabled=真；
}
}
});

非常感谢您在这个问题上给予的任何帮助

非常感谢

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

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

但我认为您应该使用jQuery并尝试以下方法：

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

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

非常感谢。我对网络开发还很陌生，你的回答对我帮助很大。