Seems I cannot check a checkbox in jQuery

[Krokonoster]

Hi,
Got an array of id's, and just want to go over all checkboxes and check those whose id are in the array.
However seems no syntax I'm using will check the checkboxes...

......
if (currentSelection != '') {
    $('[name=selectedProviders]:checkbox').each(function () {
        alert($(this).attr("id"));              // fine, get correct id!
        alert($(this).attr("name"));            // fine, get correct name (selectedProviders)
        alert($(this).attr("type"));            // fine, get "checkbox"!!!
        $(this).prop("checked", true);          // dang, not checking (at least not visually)
                        
        var id = $(this).attr("id");
        if (jQuery.inArray(id, currentSelection)) {
            // check the checkbox...
        }
        ........

The checkbox being rendered (asp.net mvc) in a table. here's one row to show what that look like:

<tr class="even">
	<td class="  sorting_1">
		<input type="checkbox" name="selectedProviders" value="ACME Security" id="14">
	</td>
	<td class=" ">ACME Security</td>
	<td class=" ">Security</td>
</tr>

2 bloody hours on this simple issue. Anyone?

Tried every syntax I know:

$(this).prop("checked", true);          // dang, not checking (at least not visually
//$(this).attr('checked', true);
//$(this).get(0).checked = true;
//$(this)[0].checked = true;

[Krokonoster]

Here's the full plugin script. I'm not sure if it got anyhing to do with my content (the list with checkboxes) being loaded at runtime (asp.net mvc partial view)

plugin:

(function ($) {
    $.fn.extend({
        // Used to open a modal, listing all service providers
        // Callback will return selected service providers
        selectServiceProviders: function (options, callback) {
            var defaults = {
                url: '',                // must be set to url to action returning service providers selection form
                currentSelection: ''    // currently selected items 
            };
            options = $.extend(defaults, options);
            return this.each(function () {
                var url = options["url"];
                var currentSelection = options["currentSelection"].split(',');
                $('#modalContent', this).load(url);
                if (currentSelection != '') {
                    $('[name=selectedProviders]:checkbox').each(function () {
                        var id = $(this).attr("id");
                        if (jQuery.inArray(id, currentSelection) > -1) {
                            $(this).prop("checked", true);
                        }
                    });
                };
                $(this).modal('show');
                $(this).bind('hidden', function () {
                    if (typeof callback == 'function') {
                        var selectedIds = new Array();
                        var selectedNames = new Array();
                        $('input[name=selectedProviders]:checked').each(function () {
                            selectedIds.push($(this).attr('id'));
                            selectedNames.push($(this).attr('value'));
                        });
                        callback.call(this, selectedIds, selectedNames);
                    }
                });
            });
        }
    });
})(jQuery);

and the code in my view

$('#manageServiceProviders').click(function () {
    $('#modalTemplate').selectServiceProviders(
        {
            url: '@Url.Action(MVC.Admin.ServiceProvider.GetProviderListForSelection(Model.Partner.Id))',
            currentSelection: $('#SelectedProviderIds').val()
        },
        function (selectedIds, selectedNames) {
            $('#SelectedProviderIds').val(selectedIds);
            $('#SelectedProviderNames').text(selectedNames.join(", "));
        }
    );
    event.preventDefault();
});

[szlamany]

CHECKED should be set by something like this

.attr("checked", "checked")

and remove the attribute to uncheck

Although I see I've done this in code as well - now I'm less sure

        function radioSet(who, where, what) {
            //var strSeq = findClass(who, "acs-seqEditPanel-");
            var wesRadios = $(who).filter('input[type=radio].' + where);
            what = String(what).replace("+", "\\+");
            var wesMyRadio = wesRadios.filter('[value=' + what + ']');
            if (wesMyRadio.length === 0) {
                wesRadios.attr('checked', false);
            } else {
                wesMyRadio.attr('checked', true);
            }
        }

[Krokonoster]

Nope, but now I'm not so sure what is really my problem:
Look at this code:

if (jQuery.inArray(id, currentSelection) > -1) {
    // just to make sure $(this) is the checkbox
    alert($(this).attr("checked") + "-" + $(this).attr("type") + "-" + $(this).attr("name") + "-" + $(this).attr("id"));
    $(this).attr("checked", "checked");
    alert($(this).attr("checked"));
    //$(this).prop("checked", true);
}

Both those alerts (before and after I check it) say "checked" for "$(this).attr("checked")". But on the view (it's a modal by the way) nothing is checked.....

[szlamany]

Check $(this).length - is it a 1??

Are you accidentally using the same "id" on more than one single DOM object??

[Krokonoster]

Yep, it's 1 every time. (just checked)

There's definitely not 2 checkboxes by the same id.
The view over which it open have something having the same Id as the name/id of these checkboxes.
Did not think it will be an issue, since I select by name, and nothing else share the same name.

Just for incase, I changed the checkbox names but same issue.

I realized at the moment my checkboxes get rendered (after name change) like this:
<input type="checkbox" name="selectedProvidersxxx" value="5" id="5">
(razor: <input type="checkbox" name="selectedProvidersxxx" value="@provider.ServiceProvider.Name" id="@provider.ServiceProvider.Id"/> )

Value / Id won't be part of the issue no?

[szlamany]

Can you use FIREBUG to debug this page? The command line access to the DOM and jquery functions makes finding issues pretty painless.

[Krokonoster]

k, will give it a shot.
Used to use firebug, but for some reason using chrome last months and never really figured out it's tools.
Will post answer here when found problem. Probably just sth stupid on my side (as usual)

[Krokonoster]

I got it working now (phew!)....but ONLY if I put in breakpoints in FireBug when binding to the events.
Otherwise it seems the modal.show get called before it the binding to the show even occured, and then my checkboxes won't get checked.
While "off the topic" can someone look at my (first) plugin and tell me where I'm going wrong?

(function ($) {
    $.fn.extend({
        // Used to open a modal, listing all service providers
        // Callback will return selected service providers
        selectServiceProviders: function (options, callback) {
            var defaults = {
                url: '',                // must be set to url to action returning service providers selection form
                currentSelection: ''    // currently selected items 
            };
            options = $.extend(defaults, options);
            return this.each(function () {
                var url = options["url"];
                $('#modalContent', this).load(url);
                // Bind to Show Event : See if we have a current selection and if so check off checkboxes accordingly
                $(this).bind('show', function () {
                    var currentSelection = options["currentSelection"];
                    if (currentSelection != '') {
                        $('[name=chkProviders]:checkbox').each(function () {
                            if (jQuery.inArray($(this).attr("id"), currentSelection) > -1) {
                                $(this).attr("checked", "checked");
                            }
                        });
                    }
                });
                // Bind to Hide Event : Call the callback function when we close
                $(this).bind('hidden', function () {
                    if (typeof callback == 'function') {
                        var selectedIds = new Array();
                        var selectedNames = new Array();
                        $('input[name=chkProviders]:checked').each(function () {
                            selectedIds.push($(this).attr('id'));
                            selectedNames.push($(this).attr('value'));
                        });
                        callback.call(this, selectedIds, selectedNames);
                    }
                });
                // PROBLEM:  this should fire AFTER binding, but it does not (unless i have a breakpoint)
                $(this).modal('show');
            });
        }
    });
})(jQuery);