Make @ Html.Checkboxfor fire jquery點擊事件

Question

我有一個問題，我thoguth woudl很簡單。希望你們能幫助我。我在一個視圖上有一個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事件，但是雖然這樣做確實禁用了下拉菜單，但當表單啓動時，複選框顯示爲未檢查。如何在首次啓動視圖時同步這些hting？

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); 
     });