Check/Uncheck aspx checkbox using Css/Jquery

Question

I am new to ASPX GridView. I have a column of checkbox.

I need to check/uncheck it using Css/Jquery

The HTML code for checkbox is as below:

<span class="dxICheckBox dxWeb_edtCheckBoxChecked" id="cbUploadXYZ_7_S_D">
  <span class="dxKBSW">
    <input id="cbUploadXYZ_7_S" name="ctl00$cphSiteBody$ctrlABCList$gvABCList$cell7_0$TC$cbUploadXYZ_7" value="I" type="text" readonly="readonly" style="opacity:0;width:1px;height:1px;position:relative;background-color:transparent;display:block;margin:0;padding:0;border-width:0;font-size:0pt;">
  </span>
</span>

I am checking the checkbox with code JQuery:

$($('#cbUploadUBS_7').find('span')[0]).removeClass("dxWeb_edtCheckBoxUnchecked").addClass("dxWeb_edtCheckBoxChecked");

But, when I click the above checked box, it remains checked on first click (should get unchecked on first click) and get uncheked on second click.

How can I apply CSS so that checkboxes work correctly?

Please help!

Edit The above code is rendered due to following code in ASPX page.

<DataItemTemplate>
  <div style="text-align: center">
      <dx:ASPxCheckBox OnInit="abcListCheckBox_Init" runat="server" ClientIDMode="Static">
          <ClientSideEvents CheckedChanged="SetCount" />
      </dx:ASPxCheckBox>
  </div>

which checkbox? i don't see one in the markup. – Jai Feb 19 '16 at 07:54 — Jai, Feb 19 '16 at 07:54
@Jai Please check my Edit. – Coding man Feb 19 '16 at 10:13 — Coding man, Feb 19 '16 at 10:13

score 0 · Answer 1 · answered Feb 19 '16 at 07:58

I think you have posted a wrong markup or may be this is a typo because the posted on has type="text" and it isn't a checkbox.
I guess you should use .toggleClass(cls1 cls2):

$('#cbUploadUBS_7')
  .children('span') // change to children
  .toggleClass("dxWeb_edtCheckBoxUnchecked dxWeb_edtCheckBoxChecked");

score 0 · Answer 2 · answered Feb 20 '16 at 09:50

Following code worked for me:

var id = "cbUploadUBS_7";
var chkBoxControl = aspxGetControlCollection().Get(id);
chkBoxControl.SetCheckState('Checked');
$($('#' + id).find('span'[0]).removeClass("dxWeb_edtCheckBoxUnchecked").addClass("dxWeb_edtCheckBoxChecked");

Check/Uncheck aspx checkbox using Css/Jquery

2 Answers2