Different browser behavior when clicking an indeterminate checkbox

[imustbuild]

Hello,

I think I may have found a bug in the way IE handles the partially selected state of a checkbox. I wasn't sure if I should chalk it up to an IE thing, or if it's something that could be overcome with a tweak to your plugin.

Here's a screencast. Sorry no audio, i'm in a loud room. http://screencast.com/t/xBpAeSp7

What I'm seeing is on Chrome/Firefox/Safari when you click a checkbox in that indeterminate state it reacts as if you want to check it, selecting all its children as well. This is preferable to me.

In IE, the click removes the indeterminate state, but it isn't unchecking the checkbox so its children aren't affected. A second click is required to do what only took one in the non-IE browsers.

I'm getting some pushback to find another plugin b/c most of our users will use IE, but I haven't found anything I like as much.

Could you take a look?

Thanks, Marc

[simonexmachina]

Yep, happy to take a look. Will try to check it out tonight.​

[davisdole]

Did you ever look into the browser issue? I've notice the same problem happening with ie8 and chrome.

[pswearin]

you can fix it with this: function stupidIEMadeMeWriteThisToForceConsitentBehaviorWhenAUserClicksACheckBoxThatIsCurrentlySetToIndeterminate() {

        if ($(this).parent().children('ol')) {
            var childItems = $(this).parent().children('ol').children();
            var anyChildrenAreChecked = false;
            var anyChildrenAreNotChecked = false;
            for (var i = 0; i < childItems.length; i++) {
                if ($(childItems[i]).children('input').is(':checked')) {
                    anyChildrenAreChecked = true;
                } else {
                    anyChildrenAreNotChecked = true;
                }
            }

            if (anyChildrenAreChecked && !anyChildrenAreNotChecked) {
                // all children are checked so do nothing
            } else if(anyChildrenAreChecked && anyChildrenAreNotChecked) {
                // some children are checked so set the checkbox that was clicked to checked
                $(this).prop('checked', true);
                $(childItems).children('input').prop('checked', true);
            } else {
                // no children are checked so do nothing
            }
        } else {
            // the checkbox has no children so do noting
        }
    }

[pswearin]

$('input[type="checkbox"]').click(stupidIEMadeMeWriteThisToForceConsitentBehaviorWhenAUserClicksACheckBoxThatIsCurrentlySetToIndeterminate);

[simonexmachina]

jquery-qubit v2.0.5 has a workaround which should fix this issue. Let me know if it works for you.

[pswearin]

I am also having an issue with the expanding and collapsing on mobile devices. I even checked your current demo on my android phone using chrome. The triangles do not appear and the list cannot be collapsed. On Apr 30, 2015 8:20 PM, "Simon Wade" notifications@github.com wrote:

jquery-qubit v2.0.5 has a workaround which should fix this issue. Let me know if it works for you.

— Reply to this email directly or view it on GitHub https://github.com/aexmachina/jquery-bonsai/issues/9#issuecomment-98006905 .

[simonexmachina]

@pswearin that's probably a known issue with Android.