60488

ASP.NET - Setting CssClass of a CheckBox

Question:

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 side as long as it works. I'd love it if the code just marked the input like its supposed to...

Answer1:

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"));

Answer2:

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()

Answer3:

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();

Answer4:

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:

<blockquote>

protected void Page_Load(object sender, EventArgs e)

{

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

}

</blockquote>

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:

<blockquote>

$(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"); } }); }); </blockquote>

Hopefully someone finds this useful.

Allen

Answer5:

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

Recommend

  • How to change the gridview width and rename the header after binding data
  • DataGrid TemplateColumn - Triger an event when changes occured(asp:radiobuttonlist)
  • ASP GridView Refresh after Excel Export not working
  • Could not find the gcm.jar error when creating App Engine backend => suggests installing deprecat
  • Is there ever a reason to use is versus as? [duplicate]
  • Disable check for override in gcc
  • Integrate two requests into one Javascript
  • How to display the hotel names that have the maximum count from data base by calculating sum in PHP?
  • Type mismatch: cannot convert from ListFragment to Fragment
  • UI-GRID column summation on checkbox change
  • Subversion reverting resolved file
  • replacing while loop with list comprehension
  • CSS Grid, position absolute an element in a css grid item: IMPOSSIBLE
  • Primefaces ManyCheckbox inside ui:repeat calls setter method only for last loop
  • DIV instruction jumping to random location?
  • Ember.js model to be organised as a tree structure
  • Jackson Parser: ignore deserializing for type mismatch
  • Content-Length header not returned from Pylons response
  • Play WS (2.2.1): post/put large request
  • OpenGL ES texture problem, 4 duplicate columns and horizontal lines (Android)
  • How to access EntityManager inside Entity class in EJB3
  • Bug in WPF DataGrid
  • How to recover from a Spring Social ExpiredAuthorizationException
  • Excel - Autoshape get it's name from cell (value)
  • TFS: Get latest causes slow project reloading
  • Check if a string to interpolate provides expected placeholders
  • Javascript Callbacks with Object constructor
  • ILMerge & Keep Assembly Name
  • vba code to select only visible cells in specific column except heading
  • How to make Safari send if-modified-since header?
  • Large data - storage and query
  • How can I estimate amount of memory left with calling System.gc()?
  • WOWZA + RTMP + HTML5 Playback?
  • GridView Sorting works once only
  • RestKit - RKRequestDelegate does not exist
  • Traverse Array and Display in markup
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • How to stop GridView from loading again when I press back button?