ASP.Net Checkbox Click Event Fires Twice

Issue

When using jQuery to detect and handle the click of an ASP.Net checkbox, the click event is detected twice. You may notice that the event fires twice
when you click on the text of the checkbox, but only once if you click on the actual checkbox input item itself.

It is because the label portion has a "for" attribute, and when you click on the label it raises the click event of the input referenced in the "for" attribute.

Solution

To get around this, add the actual input in the jQuery selector.

Example:

<asp:CheckBox ID="chkIncludeNote" runat="server" CssClass="checkbox checkbox-asp check-include-note" Text="Include Note" />

<script>
    $(function () {
        $(document).on('click', '.check-include-note input', function () {
            // This only fires once due to the addition of 'input' in the filter above.
            if ($(this).is(':checked')) {
                $(this).closest('.modal-body').find('.notes-wrapper').slideUp('fast');
            } else {
                $(this).closest('.modal-body').find('.notes-wrapper').slideDown('fast');
            }
        });
    });
</script>