jQuery selector: Firefox recognize but IE not

Question

This is my element with a custom attribute:

<input type="radio" status="B" name="OPT_PARENT"/>

My script:
Alert($(this).attr("status"));
Alert($(this).attr("test"));

Output:
Firefox 3.0.10 --> "B" and "undefined"
IE 8.0.7600.16385 --> "true" and "undefined"

My observation:
IE will return the option button "checked state" which is true/false not the custom attribute value. But IE is definitely can detect whether the custom attribute exist.

My question: How to get my custom attribute value in IE?

Answer 1

This is a workaround for IE, using outerHTML

var status = 
   ($(this)
    .get(0)
    .outerHTML
    .replace(/^.+?\bstatus\s*=\s*(?:['"])(\w+).*$/, 
       function(tag, valueattr) {
          return valueattr;
       })) || '';

Answer 2

perhaps a better option would be to use jquery's Data() which allows you to attach data to DOM objects without modifying them with invalid/custom attributes.

i imagine this would eliminate the browser incompatibility issues.

Answer 3

Using custom attributes is generally a bad idea and what you have isn't valid even in HTML5 which is supposed to allow custom attributes. Why not pass any extra info as a class or as an ID ? You could have something like

<input type="radio" id="extra_A" name="OPT_PARENT"/>
<input type="radio" id="something_B" name="OPT_PARENT"/>
<input type="radio" id="extra_C" name="OPT_PARENT"/>

The reason I prefixed it is so that it would be easier to select just the elements that you need:

$("input[id^=extra_]").each(function() {
    alert($(this).attr('id').substr(6));
});

Hope this helps.

Answer 4

Thanks all. Somehow my friends told me that "status" is probably a non-custom attribute. So after change "status" --> "myStatus" my code work well.