Сделайте @ Html.Checkbox для запуска события клика JQuery

Question

У меня проблема с чем-то, что я думаю, что все было просто.Надеюсь, вы, ребята, сможете мне помочь.У меня есть элемент управления FullCalendar в представлении.Когда вы нажимаете на dya, я отправляю вас в форму создания события.Вот моя модель просмотра ниже

namespace TRIOSoftware.WebUI.Models
{
public class CalendarEventViewModel
{
    public CalendarEventViewModel()
    {
        calendarEvent = new CalendarEvent();
        timeChoices = new List<SelectListItem>();
    }

    public CalendarEvent calendarEvent { get; set; }
    public String startTime { get; set; }
    public String endTime { get; set; }
    public IEnumerable<SelectListItem> timeChoices { get; set; }
}
}

Вот модель Calendarevent

namespace TRIOSoftware.Domain.Entities
{
public class CalendarEvent
{
    [HiddenInput(DisplayValue = false)]
    public int ID { get; set; }

    [Required(ErrorMessage = "Please enter a title")]
    public string Title { get; set; }

    [DataType(DataType.MultilineText)]
    public string Description { get; set; }

    [Required]
    [DataType(DataType.Date)]
    [Display(Name = "Start Time")] 
    public DateTime StartDateTime { get; set; }

    [Required]
    [DataType(DataType.Date)]
    [Display(Name = "End Time")] 
    public DateTime EndDateTime { get; set; }

    [Display(Name = "All Day Event")] 
    public bool IsAllDay { get; set; }

    public string URL { get; set; }
}
}

Когда я вхожу в представление создания события для нового события, я устанавливаю флажок весь день на true.Код вида ниже

        <div class="editor-label" style="float:left">
        @Html.LabelFor(model => model.calendarEvent.Title)
    </div>
    <div class="editor-field" style="float:left; padding-left:45px; width:35%"> 
        @Html.TextBoxFor(model => model.calendarEvent.Title, new { style = "width: 100%;" })
        @Html.ValidationMessageFor(model => model.calendarEvent.Title)
    </div>
    <div style="padding-top:50px">
        <div class="editor-label" style="float:left; clear:left">
            @Html.LabelFor(model => model.calendarEvent.StartDateTime)
        </div>
        <div class="editor-field" style="float:left; padding-left:10px">
            @Html.EditorFor(model => model.calendarEvent.StartDateTime)
            @Html.ValidationMessageFor(model => model.calendarEvent.StartDateTime)
        </div>
        <div class="editor-field nonAllDay" style="float:left; padding-left:20px">
            @Html.DropDownListFor(model => model.startTime, (IEnumerable<SelectListItem>)@Model.timeChoices)
        </div>
        <div class="editor-field" style="float:left; padding-top:5px; ; padding-left:20px">
            @Html.CheckBoxFor(model => model.calendarEvent.IsAllDay, new { @class = "AllDay" })
            @Html.ValidationMessageFor(model => model.calendarEvent.IsAllDay)
        </div>
        <div class="editor-label" style="float:left; ; padding-left:5px">
            @Html.LabelFor(model => model.calendarEvent.IsAllDay)
        </div>

    </div>

    <div class="editor-label" style="clear:left; float:left">
        @Html.LabelFor(model => model.calendarEvent.EndDateTime)
    </div>
    <div class="editor-field" style="float:left; padding-left:16px">
        @Html.EditorFor(model => model.calendarEvent.EndDateTime)
        @Html.ValidationMessageFor(model => model.calendarEvent.EndDateTime)
    </div>
    <div class="editor-field nonAllDay" style="float:left; padding-left:20px">
        @Html.DropDownListFor(model => model.endTime, (IEnumerable<SelectListItem>)@Model.timeChoices)
    </div>

    <div class="editor-label" style="clear:left; padding-top:20px">
        @Html.LabelFor(model => model.calendarEvent.Description)
    </div>
    <div class="editor-field" style="clear:left; width:40%">
        @Html.TextAreaFor(model => model.calendarEvent.Description, new { style = "width: 100%; height: 200px" })
    </div>

    <script type='text/javascript'>
        $(document).ready(function () {
            $('.AllDay').click(function (event) {
                if ($('.AllDay').is(':checked')) {
                    $('.nonAllDay :input').attr('disabled', true);
                }
                else {
                    $('.nonAllDay :input').removeAttr('disabled');
                }
            });
        });
    </script>

Моя проблема в том, что когда я впервые захожу на страницу, даже если флажок снят, выпадающие списки для времени не отключаются.Затем я могу установить и снять флажок на экране, и все работает как надо.Я попытался запустить событие click вручную в функции готовности документа, но пока это отключало выпадающие списки, флажок показывался как не отмеченный при запуске формы.Как я могу синхронизировать эти htings при первом запуске представления?

Answer 1

Попробуйте это ...

 <script type='text/javascript'>
    $(document).ready(function () {
          EnableDisableDropDowns();
        $('.AllDay').click(function (event) {
           EnableDisableDropDowns();
        });
    });

function EnableDisableDropDowns() {
  if ($('.AllDay').is(':checked')) {
                $('.nonAllDay :input').attr('disabled', true);
            }
            else {
                $('.nonAllDay :input').removeAttr('disabled');
            }
}
</script>

В приведенном выше сценарии используется та же логика, что и у вас ... единственное, чего вам не хватает, это то, что вам нужно запустить логику в функции EnableDisableDropDowns () , когда ваша страница загружается ... ( т.е. когда DOM загружен) ... и затем вы будете вызывать функцию EnableDisableDropDowns () каждый раз, когда вы устанавливаете / снимаете флажок ... таким образом, ваши элементы управления должны быть синхронизированы ...

Answer 2

Попробуйте:

HTML-код:

Ship to billing address? @Html.CheckBoxFor(m => m.IsShipBilling, new { id = "IsShipBilling" })

Код JQuery:

$('#IsShipBilling').change(function () {
            var isChecked = $(this).is(':checked');
            if (isChecked == true)
                $("#divShippingAddress").show(500);
            else
                $("#divShippingAddress").hide(500);
        });