Checkbox not working properly for IE with jquery

Question

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,

Please see artzstudio.com/2009/04/jquery-performance-rules/… to clean up your for loop. Your making your script unnecessarily slow by doing this check i < $("input[id*=hdnParentMenuItemID]").length . Put $("input[id*=hdnParentMenuItemID]") into a local variable and also put the length property into a local variable. — nickytonline
– nickytonline, Commented Dec 4, 2009 at 16:34

mrydengren · Accepted Answer · 2010-04-29 14:52:43Z

13

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');

answered Apr 29, 2010 at 14:52

mrydengren

4,2602 gold badges35 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jagd Over a year ago

Thanks for the solution! I was really irked at IE for this behavior, until I figured out why they place the disabled attribute on the span tag, which is because it makes it more obvious that the checkbox is disabled if the text accompanying it is grayed-out as well.

David Hedlund · Accepted Answer · 2009-12-04 16:22:58Z

0

This should def. work

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

answered Dec 4, 2009 at 16:22

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

3 Comments

nickytonline Over a year ago

This will not work. As long as the disabled expando property has a value or the disabled attribute has a value, it will remain disabled. e.g. <input type="button" disabled="false" value="I'm still disabled">. You need to explicilty remove the disabled attribute. See Joel Potter's answer.

Tim Down Over a year ago

$('#' + childID)[0] is a reference to an actual DOM element, right? If so, setting the disabled property will certainly work. No need to do anything to the attribute.

David Hedlund Over a year ago

@Tim Down: it is indeed. @nickyt: javascript handles properties like disabled and checked natively like this. the properties and their values are not a simple 1:1 mapping to the HTML attributes.

Joel · Accepted Answer · 2009-12-04 16:23:34Z

0

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

answered Dec 4, 2009 at 16:23

Joel

19.4k3 gold badges67 silver badges84 bronze badges

Comments

Tim Down · Accepted Answer · 2009-12-04 16:52:50Z

0

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;
        }
    }
}

edited Dec 4, 2009 at 16:52

answered Dec 4, 2009 at 16:30

Tim Down

326k76 gold badges461 silver badges546 bronze badges

3 Comments

Joel Over a year ago

I think you mean input = inputs[i]

Nick Craig-Wood Over a year ago

Wouldn't using $(...).each(...) be cleaner than the for loop?

Tim Down Over a year ago

@Nick Craig-Wood: Probably: a few characters fewer and a little neater, but also slower because of the extra function call each iteration. Fact is that I don't use jQuery so I don't know off the top of my head whether what gets passed to the function called each time round in each in jQuery is a DOM element or some kind of jQueryfied thingy.

Collectives™ on Stack Overflow

Checkbox not working properly for IE with jquery

4 Answers 4

1 Comment

3 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related