ASP.NET - Setting CssClass of a CheckBox

The following code

((CheckBox)e.Row.FindControl("exportCb")).CssClass = "enabledExport";

Creates html

<span class="enabledExport"><input id="_ctl0_ContentPlaceHolder1_gridviewName__ctl2_exportCb" type="checkbox" name="_ctl0:ContentPlaceHolder1:gridviewName:_ctl2:exportCb" /></span>

For the asp.net gridview column

<asp:TemplateField HeaderText="Export">
                        <ItemTemplate>
                            <asp:CheckBox runat="server" ID="exportCb"/>        
                        </ItemTemplate>
                        <ItemStyle/>
                    </asp:TemplateField>

I need to use jquery

$('.enabledExport').toggle()

to check/uncheck (as a toggle) the checkboxes. Because the CssClass is marked on the <span> the code is going to try to toggle a <span> instead of the <input>. How can I fix this?

I don't mind if the solution is on jquery or asp.net si开发者_如何学Gode as long as it works. I'd love it if the code just marked the input like its supposed to...

If you're trying to show/hide the checkbox you could do this:

$('.enabledExport input:checkbox').toggle()

but what I think you're trying to do is:

var $checkbox = $('.enabledExport input:checkbox');
$checkbox.attr("checked", !$checkbox.is(":checked"));

The easiest solution is to design jQuery selector in such way, that it would select checkbox that is located as a child of span with class 'enabledExport'. In this case it would look like:

jQuery('.enabledCheckbox > :checkbox').toggle()

or

jQuery(':checkbox', '.enabledCheckbox').toggle()

You need to use the correct cssclass and prefix it with a dot. So you've selected your span. Then step into that span and select the checkbox. This is to bind the click event:

$(".enabledExport").click(function(){
  var box = $(this).children(":checkbox");
  box.is(":checked") ? box.removeAttr("checked") : box.attr("checked", "checked");
});

And this is clicking:

$(".enabledExport").click();

I am using a MasterSite page so the checkbox elements id is getting the ContentPlaceHolder information added to the checkbox id. When the page loads, I am assigning a custom attribute to help find the elements (can be done with a foreach statement also). Here is the custom attribute code behind:

protected void Page_Load(object sender, EventArgs e)

{

  if (!IsPostBack)
   {
      chkTxa.Attributes.Add("clientID", "chkTxa");
      chkTxx.Attributes.Add("clientID", "chkTxx");
   }

}

My two checkbox IDs are: chkTxa and chkTxx. I set the AutoPostBack="False" because I want the client side to take care of the checkbox toggling. Since the checkbox is located within an html table, the browser is wrapping the checkbox in a tag. This requires you to do extra work to find the checkbox. The jQuery code is this:

$(document).ready(function () {

    var chkTxa;
    var chkTxx;
    // dig into the <span> object to find the checkbox
    chkTxa = $("[clientID=chkTxa]").children(":checkbox");
    chkTxx = $("[clientID=chkTxx]").children(":checkbox");

    $(chkTxa).click(function () {
        if (!chkTxa.is(":checked")) {
            chkTxa.removeAttr("checked");
        }
        else {
            chkTxx.removeAttr("checked");
        }
    });

   $(chkTxx).click(function () {
        if (!chkTxx.is(":checked")) {
            chkTxx.removeAttr("checked");
        }
        else {
            chkTxa.removeAttr("checked");
        }
    });
});

Hopefully someone finds this useful.

Allen

$(".enabledExport+input").toggle() should do the trick.