Asp.net Checkbox OnCheckedChanged не срабатывает, когда JQuery проверяет флажок

Question

Спасибо, что нашли время, чтобы прочитать и просмотреть мой пост. Я много занимался поиском в Google, но пока не нашел ответа на свой вопрос jquery / asp.net. Моя проблема в том, что я пытаюсь заменить стандартный флажок включенным / выключенным изображением. Есть аккуратное руководство по этому здесь . Моя проблема заключается в том, что мое событие флажка asp OnCheckedChanged не вызывается, когда Jquery устанавливает флажок.

Сценарии главной страницы ASP.NET, которые работают

<link href="~/Styles/jquery.tzCheckbox.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<%#ResolveUrl("~/Scripts/jquery.tzCheckbox.js") %>"></script>
<script type="text/javascript" src="<%#ResolveUrl("~/Scripts/script.js") %>"></script>

Страница Aspx с флажком

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:DetailsView ID="DetailsView1" runat="server" Height="16px" Width="575px">
    <Fields>
        <asp:TemplateField>
            <EditItemTemplate>
                <asp:CheckBox ID="Edit_CheckBox1_CB" runat="server" AutoPostBack="true" OnCheckedChanged="Edit_CheckBox1_CB_Clicked" />
            </EditItemTemplate>
            <InsertItemTemplate>
                <asp:CheckBox ID="CheckBox1" runat="server" />
            </InsertItemTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="CheckBox1" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Fields>
</asp:DetailsView>

JQuery Script под названием script.js

(function ($) {
$.fn.tzCheckbox = function (options) {

    // Default On / Off labels:

    options = $.extend({
        labels: ['ON', 'OFF']
    }, options);

    return this.each(function () {
        var originalCheckBox = $(this),
            labels = [];

        // Checking for the data-on / data-off HTML5 data attributes:
        if (originalCheckBox.data('on')) {
            labels[0] = originalCheckBox.data('on');
            labels[1] = originalCheckBox.data('off');
        }
        else labels = options.labels;

        // Creating the new checkbox markup:
        var checkBox = $('<span>', {
            className: 'tzCheckBox ' + (this.checked ? 'checked' : ''),
            html: '<span class="tzCBContent">' + labels[this.checked ? 0 : 1] +
                    '</span><span class="tzCBPart"></span>'
        });

        // Inserting the new checkbox, and hiding the original:
        checkBox.insertAfter(originalCheckBox.hide());

        checkBox.click(function () {
            checkBox.toggleClass('checked');

            var isChecked = checkBox.hasClass('checked');

            // Synchronizing the original checkbox:
            originalCheckBox.attr('checked', isChecked);
            checkBox.find('.tzCBContent').html(labels[isChecked ? 0 : 1]);
            if (isChecked) {
               originalCheckBox.attr('checked', isChecked);
            }

        });

        // Listening for changes on the original and affecting the new one:
        originalCheckBox.bind('change', function () {
            checkBox.click();
        });
    });
};
})(jQuery);

CSS-файл

.tzCheckBox{
background:url("../Images/background01.png") no-repeat right bottom;
display:inline-block;
min-width:60px;
height:33px;
white-space:nowrap;
position:relative;
cursor:pointer;
margin-left:14px;
}

.tzCheckBox.checked{
background-position:top left;
margin:0 14px 0 0;
}

.tzCheckBox .tzCBContent{
color: white;
line-height: 31px;
padding-right: 38px;
text-align: right;
}

.tzCheckBox.checked .tzCBContent{
text-align:left;
padding:0 0 0 38px;
}

.tzCBPart
{ 
    background:url("../images/background01.png") no-repeat left bottom;
width:14px;
position:absolute;
top:0;
left:-14px;
height:33px;
overflow: hidden;
}

 .tzCheckBox.checked .tzCBPart{
background-position:top right;
left:auto;
right:-14px;
}

Последнее примечание

Все работает как нужно, я просто не вижу, чтобы страница автоматически отправлялась, когда JQuery установил флажок. Еще раз спасибо за вашу помощь!

Answer 1

Изменения, сделанные с помощью javascript, не будут запускать такие события, как onclick или onchange. Что вам нужно сделать, это запустить событие самостоятельно, как только вы измените значение проверенного. Я не знаком с особенностями .net OnCheckedChanged, но давайте предположим, что в html он превращается в onchange (вам необходимо проверить это, просмотрев источник). Вы бы сделали что-то вроде этого:

originalCheckBox.attr('checked', isChecked);
originalCheckBox.change(); // will call the onchange code