ASP.NET MVC Javascript not firing the first time on page load

Question

This should be really simple, but I can't get it to work - I'm trying to disable 2 drop down lists when a user clicks a checkbox.

@Html.DropDownList("StartTime", new List<SelectListItem>
{
    new SelectListItem{ Text="10:00 AM", Value = "10:00 AM" },
    new SelectListItem{ Text="12:00 PM", Value = "12:00 PM" },
    new SelectListItem{ Text="2:00 PM", Value = "2:00 PM" }
}

@Html.DropDownList("EndTime", new List<SelectListItem>
{
    new SelectListItem{ Text="10:00 AM", Value = "10:00 AM" },
    new SelectListItem{ Text="12:00 PM", Value = "12:00 PM" },
    new SelectListItem{ Text="2:00 PM", Value = "2:00 PM" }
}
@Html.CheckBox("chkAllDayEvent", new { @onclick = "AllDayEvent_Checked();" })

<script type='text/javascript'>

function AllDayEvent_Checked() {
    $("#chkAllDayEvent").click(function () {
        $('#EndTime').attr("disabled", $(this).is(':checked'));
        $('#StartTime').attr("disabled", $(this).is(':checked'));
    });
}
</script>

My problem is that when I get to the page, the Javascript doesn't fire until I click the checkbox 3 times - on the 3rd time it disables the text boxes, then works as per normal.

Satpal · Accepted Answer · 2013-06-24 11:58:01Z

4

Try this

$(function(){
    $("#chkAllDayEvent").click(function () {
        $('#EndTime').attr("disabled", $(this).is(':checked'));
        $('#StartTime').attr("disabled", $(this).is(':checked'));
    });
});

@Html.CheckBox("chkAllDayEvent", new { @id = "chkAllDayEvent" })

You don't need AllDayEvent_Checked function. as you are binding it using jquery.

Or

function AllDayEvent_Checked() {
        $('#EndTime').attr("disabled", $(this).is(':checked'));
        $('#StartTime').attr("disabled", $(this).is(':checked'));
}

@Html.CheckBox("chkAllDayEvent", new { "@onclick" = "AllDayEvent_Checked();" })

answered Jun 24, 2013 at 11:58

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

1 Comment

Satpal Over a year ago

@Ant P, true, seen your answer after as soon as I answered.

Ant P · Accepted Answer · 2013-06-24 11:57:40Z

2

This is because you have a function that assigns a click handler to a checkbox. You then trigger this function when the checkbox is clicked. So, when the checkbox is first clicked, you assign a click handler to that checkbox, rather than firing the click handler, which is what you want.

Try this:

<script type='text/javascript'>
$(document).ready(function () {
    $("#chkAllDayEvent").click(function () {
        $('#EndTime').attr("disabled", $(this).is(':checked'));
        $('#StartTime').attr("disabled", $(this).is(':checked'));
    });
});
</script>

@Html.CheckBox("chkAllDayEvent", new { @id = "chkAllDayEvent" })

answered Jun 24, 2013 at 11:57

Ant P

25.3k8 gold badges74 silver badges109 bronze badges

Comments

Amit · Accepted Answer · 2013-06-24 12:00:33Z

1

Try this

@Html.CheckBox("chkAllDayEvent", new {@onclick = "AllDayEvent_Checked();" })

function AllDayEvent_Checked() {    
    $('#EndTime').attr("disabled", $("#chkAllDayEvent").is(':checked'));
    $('#StartTime').attr("disabled", $("#chkAllDayEvent").is(':checked'));

}

edited Jun 24, 2013 at 12:00

answered Jun 24, 2013 at 11:52

Amit

15.4k8 gold badges49 silver badges69 bronze badges

1 Comment

Evonet Over a year ago

Doesn't work, the "@onclick" gives an error - it shouldn't need to be in quotes. Also, @onclick = "blah" works ok as the onclick event is being rendered in the view, just doesn't seem to work for the first few clicks on the checkox

Marsh · Accepted Answer · 2013-06-24 12:40:02Z

0

function AllDayEvent_Checked() {
    $('#EndTime').attr("disabled", $(this).is(':checked'));
    $('#StartTime').attr("disabled", $(this).is(':checked'));
}

@Html.CheckBox("chkAllDayEvent", new { "@onclick" = "AllDayEvent_Checked();" })

answered Jun 24, 2013 at 12:40

Marsh

1732 silver badges16 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC Javascript not firing the first time on page load

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related