asp.net checkbox converted to three-state checkbox, not hitting original event handler

Question

Hi,

I have a usercontrol with an asp.net checkbox in it. I'm attempting to write a jquery script to convert that normal checkbox into a three-state checkbox. The states are 'checked', 'unchecked', and 'intermediate'. Clicking on an intermediate state should change the state to checked, clicking on an unchecked state should change the state to checked, and clicking on the checked state should change the state to unchecked.

My idea was to be able to insert a normal asp.net checkbox into the page and then call the jquery function to make it three-state.

Here's my jquery function, which is rough but working:

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

Here's a simplified version of my OnPreRender event handler which registers a startup script:

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

Everything seems to work correctly, except that I'm not hitting the event handler of the original checkbox when I post back, after clicking my newly inserted image. It does hit Page_Load.

If I take out the .hide() part of the jquery, and click on the original checkbox, Request.Params['__EVENTTARGET'] is the same as when clicking the newly inserted image.

I'm not sure where to go from here. Any suggestions?

Answer 1

I decided to go a different way with this. It turns out it's much easier to use an linkbutton, with an image in it, to simulate a three-state checkbox. It has it's own postback events and all you have to do is change the imageurl.

:-)