ansaurus

Question

Overriding check box in JavaScript with jQuery

Answer 1

A:

Try this:

$(function() {
    $('<div><input type="checkbox" name="makeHidden" id="makeHidden" checked="checked" />Make Hidden</div>').appendTo('body');
    $('<div id="displayer" style="display:none;">Was Hidden</div>').appendTo('body');

    $('#makeHidden').click(function() { return onCheckboxClicked(this) } );
});

function onCheckboxClicked(el) {
    var isChecked = $(el).is(':checked');

    if (isChecked) {
        $('#displayer').hide();
    }
    else {
        $('#displayer').show();
    }
    return false;
}

Coronatus 2010-05-20 15:32:02

been down this road. becuase of the return false it overrides the behavior of the checkbox. It will always be checked. it does run the click though, but then resets the checked property internally on the checkbox. really retarded. happens in ie and firefox

Gutzofter 2010-05-20 15:38:06

Answer 2

+2 A:

How about using change instead of click?

$('#makeHidden').change(function() {
            var isChecked = $(this).is(':checked');

            if (isChecked) {
                $('#displayer').hide();
            }
            else {
                $('#displayer').show();
            }
            return false;
        });

The return false; won't be in the way since the event is fired as a result of the change having occurred.

patrick dw 2010-05-20 15:34:06

This works so far in my toy example. now let me run my tests in real code!

Gutzofter 2010-05-20 15:39:37

Sounds good. Let me know how it turns out.

patrick dw 2010-05-20 15:48:29

Works like a charm in Firefox. Firefox: Manual test of toy - good. Unit Tests - good. Manual test of production app - good.Internet Explorer: Manual test of toy - fail. Unit Tests - good. Manual test of production app - fail.Internet Explorer requires initially, one-click. after that it requires two clicks.

Gutzofter 2010-05-20 16:03:56

I love IE. Sorry to say, I don't have a clue. Tinkered for a while, and don't know how to make it behave.

patrick dw 2010-05-20 16:26:17

see my hack to the question.

Gutzofter 2010-05-26 22:30:33

Answer 3

+1 A:

Here is a work around.

Now my code is like this:

        if ($.browser.msie) {
            $('#makeHidden').change(function () {
                this.blur();
                this.focus();
                onCheckboxClicked();
            });
        }
        else {
            $('#makeHidden').change(function() {
                return onCheckboxClicked();
            });
        }

All my tests including manual toy and manual production are good.

Anybody have something better than this hack?

Gutzofter 2010-05-20 16:54:34

+1 - Interestingly, I worked on a somewhat similar IE `change` issue recently, except on a `select` list. That solution/hack required a native API `blur()` and `focus()` like yours. Unlike yours, that issue was with `change` *not* firing the first time, yet the second change (and every change thereafter) fired. So the solution was a jQuery `focus()`, then a native `blur() focus()`. Thankfully, no browser check was necessary as the hack ran only once. I'm tracking this one as a reminder. Thanks for posting your solution.

patrick dw 2010-05-26 22:46:25

The problem is that my unit tests didn't capture the problem. I think that is why you shouldn't test the gui.

Gutzofter 2010-05-27 02:42:10

ansaurus

tags:

views:

answers:

Overriding check box in JavaScript with jQuery

related questions