Machen @ Html.Checkboxfor Feuer JQuery klicken Ereignis

Question

Ich habe ein Problem mit etwas, dass ich Thoguth wouldl einfach gewesen. Hoffentlich könnt ihr mir helfen. Ich habe ein FullCalendar-Steuerelement in einer Ansicht. Wenn du auf einen dya klickst, habe ich dich in ein create Event-Formular geschickt. Hier ist meine Viewmodel unter

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

Hier wird das Calendarevent Modell

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

Wenn ich in die Veranstaltung erstellen gehen Ansicht für ein neues Ereignis i den ganzen Tag Checkbox wahr bin säumigen. Der View-Code ist unter

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

Mein Problem ist, dass, wenn ich zum ersten Mal in der Seite gehen, obwohl das Kontrollkästchen, um den Drop-downs für die Zeit abgehakt werden nicht deaktiviert. Ich kann dann das Kontrollkästchen auf dem Bildschirm aktivieren und deaktivieren und alles funktioniert wie es sollte. Ich habe versucht, das Click-Ereignis manuell in der Dokument bereit-Funktion zu feuern, aber während das die Dropdown-Listen deaktivierte, wurde das Kontrollkästchen dann als nicht aktiviert angezeigt, wenn das Formular gestartet wurde. Wie kann ich diese Einstellungen beim ersten Start der Ansicht synchronisieren?

Answer 1

Try this ...

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

Das obige Skript verwendet die gleiche Logik, die Sie hatten ... das einzige, was Sie scheinen zu fehlen, ist, dass Sie die Logik in EnableDisableDropDowns ausgeführt werden müssen() Funktion, wenn Ihre Seite geladen wird ... (dh wenn das DOM geladen ist) ... und dann rufen Sie die Funktion EnableDisableDropDowns() jedes Mal auf, wenn Sie das Kontrollkästchen aktivieren/deaktivieren ... auf diese Weise sollten Ihre Steuerelemente synchron sein ...

Answer 2

Versuchen Sie dies:

HTML-Code:

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

JQuery-Code:

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