asp.net复选框转换为三态复选框,而不是命中原始事件处理程序

时间:2010-07-19 17:39:52

标签: asp.net jquery event-handling

我有一个带有asp.net复选框的usercontrol。我正在尝试编写一个jquery脚本来将该普通复选框转换为三态复选框。状态被“检查”,“未检查”和“中间”。单击中间状态应将状态更改为已选中,单击未选中状态应将状态更改为已选中,单击已选中状态应将状态更改为未选中状态。

我的想法是能够在页面中插入一个普通的asp.net复选框,然后调用jquery函数使其成为三态。

这是我的jquery函数,它很粗糙但工作正常:

function SetTriStateCheckBox(checkboxfinder, initialval, originalCkbxUniqueID) {
    var i = 0;
    var chks = $(checkboxfinder);
    if (initialval){ chks.val(initialval); }
    chks.hide().each(function() {
        var img = $('<img class="tristate_image" src="../Images/tristateimages/' + $(this).val() + '.gif" />');
        $(this).attr("checked", ($(this).val()=="unchecked"?"false":"true"));
        $(this).attr("name", "input" + i + "image" + i);
        img.attr("name", "" + i + "image" + i);
        i++;
        $(this).before(img);
    });


    $(".tristate_image").click(function() {
        t = $("[name='input" + $(this).attr("name") + "']");
        var tval = t.val();
        $(this).attr("src", "../Images/tristateimages/" + (tval=="checked" ? "unchecked" : "checked") + ".gif");
        switch (tval) {
            case "unchecked":
                t.val("checked").attr("checked", "true");
                break;
            case "intermediate":
                t.val("checked").attr("checked", "true");
                break;
            case "checked":
                t.val("unchecked").removeAttr("checked");
        }
        setTimeout('__doPostBack(\'' + originalCkbxUniqueID + '\',\'\')', 0);
    });   
}

这是我的OnPreRender事件处理程序的简化版本,它记录了一个启动脚本:

protected override void OnPreRender(EventArgs e)
{
    string tristatescript = " SetTriStateCheckBox('input[id$=\"ckbx1\"]', 'intermediate','"
        + ckbx1.UniqueID + "'); ";
    ScriptManager.RegisterStartupScript(this, this.GetType(), "ckbx1_tristate", tristatescript, true);
    base.OnPreRender(e);
}

一切似乎都能正常工作,除了我在点击新插入的图像后回发时没有点击原始复选框的事件处理程序。确实命中了Page_Load

如果我取出jquery的.hide()部分,然后点击原始复选框,Request.Params['__EVENTTARGET']与点击新插入的图片时相同。

我不知道从哪里开始。有什么建议吗?

1 个答案:

答案 0 :(得分:2)

我决定采取不同的方式。事实证明,使用带有图像的链接按钮来模拟三态复选框要容易得多。它有它自己的回发事件,你所要做的就是改变图像。

: - )