@ Html.Checkboxfor火災JQueryクリックイベント

Question

私はthoguth woudlがシンプルであるということを私は問題としています。うまくいけば皆さんは私を助けてくれるはずです。ビューにFullCalendarコントロールがあります。あなたがdyaをクリックすると、あなたをイベントの作成フォームに送りました。私はtrueに終日]チェックボックスをデフォルトにしています新しいイベントのためにイベントを作成するビューに行くときここでここで

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

以下の私のviewmodelは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; } 
} 
} 

されています。ビューのコードは、私の問題は、私が最初のページに行くときにチェックボックスが無効になっていない時間のためのドロップダウンをオフにチェックされているにもかかわらず、ということである

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

を下回っています。次に、画面のチェックボックスをオンまたはオフにすると、すべてが正常に動作します。私は、ドキュメント準備機能で手動でクリックイベントを発射しようとしましたが、ドロップダウンを無効にしていた間にチェックボックスは、フォームの起動時にチェックされていないことを示しました。最初にビューを起動するときに、これらのヒッティングをどのように同期させることができますか？

Answer 1

上記のスクリプトは、あなたが持っていた同じロジックを使用しています...あなたが不足しているように見える唯一のことは、あなたがEnableDisableDropDowns（のロジックを実行する必要があるということです

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

...これを試してみてください）あなたのページが読み込まれたとき（つまり、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); 
     });