JQuery if statement not detecting span checkbox properly

Question

I have a span checkbox and I'd like to check to see if it's checked.

I believe it's not detecting the checkbox correctly for some reason.

My current code(abbreviated -- there's actually many error checks that are similar to the #cb_head line):

    function validate() {

    var errMessage = "";
    if (!$('#cb_head').is(":checked")) {
        errMessage += "Header\n";                
    }

    if (errMessage !== "") {
            errMessage += "Hasn\'t been verified, proceed with proof?";
            confirm(errMessage);
            return false;
        }
        else {
            return true;
        }

    }

The checkbox html:

<td class="dxflNestedControlCell_Office2010Black">
<span class="dxichCellSys dxeBase_DevEx dxeTAR" id="cb_head">
<span id="cb_head_S_D" class="dxICheckBox_DevEx dxichSys dxWeb_edtCheckBoxChecked_DevEx">
<input id="cb_head_S" name="ctl00$ctl00$ASPxSplitter1$Content$ContentSplitter$MainContent$ASPxCallbackPanel1$ASPxFormLayout3$cb_head" value="U" readonly="readonly" style="border-width:0;width:0;height:0;padding:0;margin:0;position:relative;background-color:transparent;display:block;" type="text">
</span></span>
</td>

So here's what I've tried to get it working but to no avail:

Finding the checkbox child elements: JQuery check if checkbox is NOT checked

I believe the error I'm having is somewhere in the HTML but I've tried the IDs:

cb_head_S_D
cb_head_S
cb_head

But still it doesn't seem to detect the right ID properly.

Happy to provide more info if needed.

`:checked` only works on checkboxes, radio buttons, and selects. A `span` isn't any one of those, so I don't know why you expect it to work. — jmoerdyk, Feb 22 '16 at 21:35
Are you using DevExpress controllers? Just check the `value` attribute of the input. If it is == 'U' it is unchecked, if it is 'C' then it is checked. — Hanlet Escaño, Feb 22 '16 at 21:38

score 3 · Accepted Answer · edited Feb 22 '16 at 22:05

3

From the JQuery reference:

The :checked selector works for checkboxes, radio buttons, and select elements.

The problem is that you are trying to use it with a span.

edited Feb 22 '16 at 22:05

Don't Panic

41,125
10
61
80

answered Feb 22 '16 at 21:36

André Bonna

807
8
13

score 0 · Answer 2 · answered Feb 22 '16 at 21:39

The reason this isn't working, I believe, is because you're trying to use a span element as if it is an input element. Spans don't have the "checked" attribute, so you aren't able to retrieve this value.

I imagine you're creating your checkboxes with span tags because you're probably able to style them better. If that's the case, I'd recommend creating a second set of hidden inputs to match your visible span checkboxes. When a span checkbox is checked - you should also update the hidden checkbox with the new value and vice-versa.

Then when the time comes, you can just perform your .is(":checked") pass on the hidden checkboxes that contain the real value. You won't be able to natively pull the data from a span anyways. You need to have a matching input counter-part somewhere.

Ahh I see, yeah that could do it. haha, yeah you would need to be able to manually modify the code in order to do something like this. Not sure what DevExpress is like, never used it — sm1215, Feb 22 '16 at 21:53

JQuery if statement not detecting span checkbox properly

2 Answers2