ansaurus

Question

Why won't .attr('checked','checked') set?

Answer 1

+2 A:

http://www.electrictoolbox.com/check-uncheck-checkbox-jquery/

jQuery (or the browser's DOM? I forget) expect a true or false value for the "checked" attribute, despite the fact that in HTML-source-land it's "checked='checked'".

HTH.

Brendan Kidwell 2010-04-08 00:46:40

i use `.attr('checked','checked')` in probably 100 locations throughout my code and it works as expected...

Jason 2010-04-08 00:49:32

I believe browsers actually just look for the presence of the attribute and don't care about its value at all.

notJim 2010-04-08 00:50:58

Answer 2

A:

Isn't doing $(result).find('td.select-ad input').attr('checked','checked').click(); going to check it (.attr('checked','checked')) and then uncheck it by clicking (.click())?

Forgive me if there's something I'm missing, but I'm fairly certain that's it. That's why $('#ad_' + id).click(); works, but your other examples don't.

notJim 2010-04-08 00:49:48

i thought that too... but why won't it stay ticked?

Jason 2010-04-08 00:51:24

When you do the `click()` call, it unticks the box. It's ticking it, then unticking it. What if you instead did `$(result).find('td.select-ad input').click();` (remove the `.attr('checked','checked')` part).

notJim 2010-04-08 00:54:44

when i do that, nothing happens at all.

Jason 2010-04-08 00:56:39

What's in your click handler? It's possible there is something like preventDefault, or return false that's preventing it from getting checked.

notJim 2010-04-08 01:03:37

there is no preventDefault or return false

Jason 2010-04-08 01:09:48

Answer 3

+1 A:

I suspect what is happening here is that the Click is actually unticking the checkbox. That is because the Find method is, as you say, returning the checkbox.

Try removing the click call.

Here's some sample code

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
    </head>

    <body>

        <script type="text/javascript">
            function clicked() {
                console.log('clicked');
            }

            $(document).ready(function() {

                var result = '<tr><td><input type="checkbox" id="chkbx" onclick="clicked()" /></td></tr>';

                $('#edit_ads_form tbody').prepend(result);

                $('#edit_ads_form tbody').find("input").click();
            });
        </script>

        <table id="edit_ads_form">
        <tbody>

        </tbody>
        </table>
    </body>
</html>

Jonathan 2010-04-08 00:50:30

i did... nothing happens

Jason 2010-04-08 00:50:59

I've added some code, shows the checkbox getting checked and the click event firing.

Jonathan 2010-04-08 01:03:18

Answer 4

+3 A:

I think it's because you're doing your find on some html which isn't in the DOM.

$.post('/Ads/GetAdStatsRow/', { 'ad_id': id }, function(result) {
    // the "result" html is copied into the DOM
    $('#edit_ads_form tbody').prepend(result);

    // now you're doing a find on some HTML which isn't in the DOM.
    $(result).find('td.select-ad input').attr('checked','checked').click();
});

That explains why doing the specific stuff works, to an extent. Here are the individual problems:

$('#ad_' + id).click();

This will click the box (making it get checked), but there are no events attached to it.

$('#ad_' + id).attr('checked','checked').click();

This sets the attribute to checked, and then clicks it, unchecking it straight away.

nickf 2010-04-08 00:50:57

this makes sense... however i have the checkbox click event set with `live('click')` earlier in the doc. shouldn't it run?

Jason 2010-04-08 00:54:41

I think one reason why `$(result)..click()` is not doing anything as `live` handlers listen to events that bubble up to the DOM document, but `$(result)` contains nodes detached from the DOM.

Anurag 2010-04-08 01:18:46

Answer 5

+1 A:

I figured it out, thank you to all who put me on the right track. Here's what I had to do:

First, rather than wiring my checkboxes to run on click(), I updated them to run on change(). After I did this, I used the following line in place of the other:

$('#ad_' + id).click().change();

and everything works now! The checkbox stays checked and the correct function is called.

Thanks again everyone!

Jason 2010-04-08 01:22:35

good catch.. click handler is called before the checkbox value gets updated, and change handler is called after the value gets updated, but the change handler will not be called when programmatically firing a click.

Anurag 2010-04-08 01:40:22

ansaurus

tags:

views:

answers:

Why won't .attr('checked','checked') set?

EDIT

EDIT 2

related questions