Disable TextBoxFor after User selects a value from a DropDownListFor

Question

I am trying to disable 2 TextBoxFor elements after the user has selected a certain value from a DropDownListFor. I wrote a javascript function but somehow it is not working: Here is the code:

@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>

Any help on this problem is highly appreciated Thank you very much

Answer 1

You have declaration of function disableTextBox, that is fine for doing your task, but I don't see where you are calling it. If you need to call it when value of your dropDownList changing - you need to call it as handler of change event:

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

But I think you should use jQuery and try something like this:

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

For additional information about making element disabled look at this post.