jQuery not selecting id containing "<" angular bracket?

Question

I am not able to select checkbox which has id="check stage<lead>" in jQuery Selector.

HTML:

<input id="check stage<lead>" type="checkbox" title="Select/Unselect Column" name="chk-stage-column-select" value="" onchange="">

Javascript:

// escape jquery selectors
    function jQueryEscape(str) {
        if (str)
            return str.replace(/([ #;?%&,.+*<>~\':"!^$[\]()=>|\/@])/g, '\\$1');

        return str;
    }


      var StageName = "<lead>";

  $("[id='check stage" + jQueryEscape(StageName) + "']").prop("checked", true);

Equivalent JsFiddle : https://jsfiddle.net/vuw43uav/5/

Note: I'm using jQuery 1.7 and we can select id with spaces in jQuery. refer this jsFiddle: https://jsfiddle.net/vuw43uav/7/

score 3 · Accepted Answer · answered Mar 17 '16 at 11:32

I know you asked to make it work using jQuery Selector, but you can do it using javascript.

Just select the element using javascript and make it checked.

document.getElementById("check stage"+StageName).checked = true;

Here is the working fiddle for your 1.7 jquery version. Fiddle

In case you want jquery selector, just select the element using javascript and then convert it to jquery selector, I know this is lame but should work fine for you.

var y = $(document.getElementById("check stage"+StageName));
y.prop("checked",true);

great answer from a newbie :) – GorvGoyl Mar 17 '16 at 13:48 — GorvGoyl, Mar 17 '16 at 13:48

gurvinder372 · Answer 2 · 2016-03-17T10:35:45.857

1

Id attribute must not have any space characters, check this spec

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

use data-id instead

<input data-id="check stage<lead>" type="checkbox" title="Select/Unselect Column" name="chk-stage-column-select" value="" onchange="">

 $("[data-id='check stage" + StageName + "']").prop("checked", true);

Demo

edited Mar 17 '16 at 10:35

answered Mar 17 '16 at 10:29

gurvinder372

66,980
10
72
94

2

Your source is obsolete. See [the current spec](https://www.w3.org/TR/html5/dom.html#the-id-attribute): The value must not contain any space characters. There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc. – Quentin Mar 17 '16 at 10:34
Id attribute CAN have space characters. – GorvGoyl Mar 17 '16 at 10:44
@JerryGoyal As per the spec, it shouldn't have. But it may not be supported by current browsers as is. So, I am recommending going with `data-id` – gurvinder372 Mar 17 '16 at 10:45
@gurvinder372 your fiddle is not working for jQuery 1.7. Do you solution for 1.7 version? – GorvGoyl Mar 17 '16 at 11:03
@JerryGoyal 1.7 is not able to use selector with special characters. – gurvinder372 Mar 17 '16 at 11:13

jQuery not selecting id containing "<" angular bracket?

HTML:

Javascript:

2 Answers2

Related