Make @Html.Checkboxfor fire JQuery click event

Question

I am having an issue with somethign that I thoguth woudl have been simple. Hopefully you guys can help me out. I have a FullCalendar control on a view. When you click on a dya I sent you into a create event form. Here is my viewmodel 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 into the create event view for a new event i am defaulting the all day checkbox to true. The view code is 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 go into the page even though the check box is checked off the drop downs for time are not disabled. I can then check and uncheck the checkbox in the screen and everything works as it should. I tried firing the click event manually in the document ready function but while that did disable the dropdowns the checkbox then showed as not checked when the form starts up. How can i get these htings in sync when first starting up the view?

did you try debugging the javascript code using firebug or some plugin...? — NiK
– NiK, Commented Apr 3, 2012 at 19:02
I know the code works because once the page is loaded i can check and uncheck the box and the combo boxes enable and disable correctly. — Dave Wade
– Dave Wade, Commented Apr 3, 2012 at 19:10

NiK · Accepted Answer · 2012-04-03 19:17:11Z

3

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>

The above script uses the same logic you had...the only thing you seem to be missing is that you need to run the logic in EnableDisableDropDowns() function when your page loads... (i.e when the DOM is loaded)...and then you will call the function EnableDisableDropDowns() everytime you check/uncheck the check box...this way your controls should be in sync...

answered Apr 3, 2012 at 19:17

NiK

1,8571 gold badge23 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dave Wade Over a year ago

This did work. I actually found another way as well which was to change from a click event to a change event on the checkbox and then I was able to trigger the event in document ready but I think your way is cleaner

Nalan Madheswaran · Accepted Answer · 2013-10-26 19:32:11Z

2

Try this:

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

answered Oct 26, 2013 at 19:32

Nalan Madheswaran

10.6k1 gold badge60 silver badges44 bronze badges

Collectives™ on Stack Overflow

Make @Html.Checkboxfor fire JQuery click event

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related