Checkbox not working properly for IE with jquery

Question

Hi, I am trying using several asp.net checkboxes on a page, disabling them accordingly.

<asp:CheckBox ID='chkMenuItem' runat='server' CssClass='HiddenText' Text='Test'      onclick='<%#String.Format("checkChild({0});", Eval("id")) %>' />

on javascript, I am using the following code

function checkChild(id) {
            for (i = 0; i < $("input[id*=hdnParentMenuItemID]").length; i++) {
                if ($('input[id*=hdnParentMenuItemID]')[i].value.split(':')[0] == id) {
                    var childID = $('input[id*=hdnParentMenuItemID]')[i].value.split(':')[1];
                    if ($("#" + childID).attr("disabled"))
                    //$("#" + childID).attr('disabled', '');
                        $("#" + childID).removeAttr("disabled");
                    else
                        $("#" + childID).attr('disabled', true);
                }
            }
        }

Now is the checkboxes are disabled once the page is loaded, the removeAttr section doesn't work. I tried to step through the debugger and the logic works perfectly fine. If the checkboxes aren't disabled on page load, the code works fine. I tried replacing disabled 'attributes' with 'checked' to see if the other attributes work fine and it works perfectly fine. I tried

 $("#" + childID).attr('disabled', '');

but it didnt work either.

Note: It works perfect on FF and Chrome but doesnt work in IE.

Thanks,

Answer 1

This should def. work

$('#' + childID)[0].disabled = false;

Answer 2

You want an if statement like this

if ($("#" + childID + ":disabled").length) // is childID disabled?
    $("#" + childID).removeAttr("disabled"); // enable it
else
    $("#" + childID).attr('disabled', 'disabled'); // disable it

Answer 3

There are loads of redundant selectors here that will be making this function very inefficient. First, running queries for selectors is very slow relative to the rest of the code, so cache the result of your selector and work on that. Also, you should declare i with the var operator to make it local to your function. And there's no need for jQuery to get an element by its ID or that deeply confusing stuff to get and set its disabled status, which can be done far more simply with the boolean DOM disabled property. All that said, I don't really know why your code's not working, but making it readable and simple will definitely help.

function checkChild(id) {
    var input, checkBox, parts, inputs = $("input[id*=hdnParentMenuItemID]");
    for (var i = 0, len = inputs.length; i < len; i++) {
        input = inputs[i];
        parts = input.value.split(':');
        if (parts[0] == id) {
            checkBox = document.getElementById( parts[1] );
            checkBox.disabled = !checkBox.disabled;
        }
    }
}

Answer 4

I had similar problems enabling an <asp:CheckBox /> in Internet Explorer using jQuery. The following code worked perfectly fine in FireFox.

$('myCheckBox').removeAttr('disabled');

However, it failed to work properly in IE.

An <asp:CheckBox /> is rendered as a <span /> with an <input /> and a <label /> tag. When the checkbox is disabled both the span and the input tags are decorated with the disabled attribute. To get the expected behavior I used to the following code:

$('myCheckBox').removeAttr('disabled');
$('myCheckBox').closest('span').removeAttr('disabled');