Make @ Html.Checkbox for JQuery fire click event
I have somethign problem that I thoguth woudl was simple. Hope you guys can help me. I have a FullCalendar control. When you click on dya, I sent you to the create event form. Here is my view model below
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; }
}
}
Here is the Calendarevent model
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; }
}
}
When I go to the Create Event view for a new event, I set the All Day checkbox to true. View code below
<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>
My problem is that when I first visit the page, even if the checkbox is checked, the dropdowns for the time are not disabled. Then I can check and uncheck the box on the screen and everything works as it should. I tried to manually fire the click event in the document ready function, but while this disabled the dropdowns, they showed up as unchecked when the form was launched. How can I get these settings in sync the first time I launch a view?
source to share
Try it...
<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>
The above script uses the same logic as you ... the only thing you seem to be missing is that you need to run the logic in the EnableDisableDropDowns () function when your page is loading ... (i.e. when the DOM is loading ) ... and then you will call the EnableDisableDropDowns () function every time you check / uncheck the checkbox ... this way your controls should be in sync ...
source to share
Try the following:
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);
});
source to share