CODEWITHSUNDEEP
jqueryhtmlcss
John Travolta
John Travolta

Reputation: 604

css prevent events

I have bumped with odd behaviour. I have set of checkbox input. On itself the following code works ok. But if integrate it into website when you press All button nothing happen 

    $("[name*=group_]").live('click', function(){
        var id = $(this).attr('name').substr(6,1);
        var cnt = $("[value!='all'][name*=group_"+id+"]:checked").length;

        if(cnt > 0){
            $("[value='all'][name*=group_"+id+"]").removeAttr('checked');
        } else {
            $("[value='all'][name*=group_"+id+"]").attr('checked', 'checked');
        }
    })

<fieldset class="subject">


                        <input type="checkbox" value="all" name="group_4" id="group_4"><label title="All" for="all">All</label>
                                            <input type="checkbox" value="15" id="cat_15" name="group_4[]"><label title="Maths" for="cat_15">Maths</label>

                                            <input type="checkbox" value="16" id="cat_16" name="group_4[]"><label title="English" for="cat_16">English</label>

                                            <input type="checkbox" value="14" id="cat_14" name="group_4[]"><label title="Science" for="cat_14">Science</label>

                    </fieldset>

Please go there http://jsfiddle.net/XXQTT/1/ and try it with Applicability. When you click ex:Early Years it works but then if you click on All - nothing. I suppose its because of css but can't figure out how and how to make it work

Upvotes: 2

Views: 128

Answers (1)

eithed
eithed

Reputation: 4349

The problem is [value!='all'] - attribute selector doesn't have ! option. Try replacing it with $(":not([value='all'])[name*group_"+id+"]:checked")

Edit

Based on feedback from John Travolta:

  1. this works for me and returns correct value. 2. the problem there is no event generated. I put alert and there wasn't popup when you click on All

Fair enough - the more you know! :D There's no bubbling of events on the All label, as tested with :

$('label').click(function() {
    window.alert('hi');
});

$('[type=checkbox]').click(function() {
    window.alert('hello');
});

@edit - i'd blame it on script that handles label/input clicking, not css, as the following makes it work fine:

$('label').click(function() {
    $(this).prev("input:first").click();
});

Upvotes: 1

Related Questions