CODEWITHSUNDEEP
jqueryasp.net-mvc-3
Dave Wade
Dave Wade

Reputation: 473

Make @Html.Checkboxfor fire JQuery click event

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?

Upvotes: 3

Views: 13837

Answers (2)

Nalan Madheswaran
Nalan Madheswaran

Reputation: 10572

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

Upvotes: 2

NiK
NiK

Reputation: 1857

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

Upvotes: 3

Related Questions