jQuery and checkboxes, i can't see the changes

Question

I have many checkboxes in a ASP item repeater :

<asp:Repeater ID="rpPostes" runat="server" DataSource="<%# this.ItemsPostesBudgetaires %>">

Somewhere within the repeater, a checkBox described as :

<asp:CheckBox runat="server" Class="chk" ID="chkPieceJust" Text="Recues" Visible="<%#  Mode.HasFlag(ModeType._BoutonsApprobation)  %>" Enabled="<%# CheckBoxDispo() %>" Checked="<%# CheckBoxChecked(Container.DataItem as Transaction) %>" />

At the end of all that, a button that is suppose to turn every checkBoxes to true :

<input id="chkAllPieceJust" type="button" value="Toutes Pièces Justificatives Recues" onclick="CTCC.Transactions.PieceRecuClick(this);" />

And finally here's my jQuery function :

CTCC.Transactions.PieceRecuClick = function (source) {

$('.chk').attr('checked', true);

}

What happens after I click the button is that kind of html output :

<span class="chk" checked="checked"><input ... blablabla

but nothing happens, checkboxes are not checked at all...

I can't figure what else do I need...

Answer 1

The Checkbox control's CssClass property actually applies the class to a span element that wraps the checkbox itself. You can either apply the class directly to the checkbox element by assigning it in the codebehind like this:

MyCheckBox.InputAttributes["class"] = "chk";

Or modify your jquery to look for the input child element of the .chk element, like this

$(".chk input[type='checkbox']").prop('checked', true);