Question

我遇到了一些问题，我认为thoguth很简单。希望你们能帮助我。我对视图有一个FullCalendar控件。当您点击dya时，我将您发送到创建活动表单。这是我在下面的viewmodel

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>

我的问题是，当我第一次进入页面时，即使勾选了复选框，也不会禁用下拉时间。然后，我可以选中并取消选中屏幕中的复选框，一切正常。我尝试在文档就绪功能中手动触发单击事件，但是当确实禁用了下拉列表时，复选框显示在表单启动时未检查。首次启动视图时，如何让这些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);
        });

Make @ Html.Checkboxfor fire JQuery click事件

2 个答案: