How to get clicked indeterminate checkboxes to 'checked' state

Question

I have tried to follow this thread that suggests a solution to check indeterminate states.

I am using ASP.NET, and it seems that clicking a checkbox in indeterminate state will uncheck it, and not fire any event (the underlying checkbox is actually 'unchecked'). I was thinking of having Javascript check it for me when I click a checkbox that is in indeterminate state (prefer the logic this way, and that should fire my ASP.NET event).

$(document).ready(function () {
    $(".UndefinedCheckboxState :checkbox").prop("indeterminate", true);

    $(":checkbox").click(function () {
        if ($(this).prop("indeterminate")) {
            $(this).prop("indeterminate", false);
            $(this).prop("checked", true);
        }
    });
});

UPDATE: The click event works fine, but the condition in the if is never true ! I keep clicking checkboxes in indeterminate state though...

Answer 1

It turns out that if the checkbox that was clicked has an indeterminate state, by the first instruction within the click event, that property has gone already.

I have replaced my logic to test something that has not faded away yet :

<script type="text/javascript">
    $(document).ready(function() {
        $(".UndefinedCheckboxState :checkbox").prop("indeterminate", true);

        $(":checkbox").click(function () {
            if ($(this).closest("span").hasClass("UndefinedCheckboxState")) {
                $(this).prop("indeterminate", false);
                $(this).prop("checked", true);
            }
        });
    });
</script>