IE10 - textbox attribute disabled/enabled

Question

I have textboxes that when the user click on one of the textbox, all other textboxes will be disabled. It is working fine in firefox, what i can not understand is that, the enabling of the textbox doesn't work in IE10 (i cannot edit the value inside the textbox when enable(?). Below are my jquery codes, am i missing something for IE10? i have tried .prop('disable', false), .prop('readOnly', false) but nothing works in IE10 but in firefox i have no problem. please help.

Textbox onclick event:

function DisableTboxExceptActiveTxbox(txtbox) {
  $('input[id*="tbxQty"]').attr("disabled", true);
  $(txtbox).removeAttr("disabled");
}

Cancel Button onclick event:

function CancelUpdate(btn) {
  $('input[id*="tbxOrderQty_"]').removeAttr('disabled');
}

Answer 1

You should use .prop('disabled', true|false) when disabling or enabling the textboxes, not attr('disabled', true) and removeAttr('disabled'). So the proper code would be:

function DisableTboxExceptActiveTxbox(txtbox) {
  $('input[id*="tbxQty"]').prop("disabled", true);
  $(txtbox).prop("disabled", false);
}

UPDATE:

It appears that the first statement is causing IE 10 and 11 to make the current textbox disabled, and despite the second line removing the disabled property, IE re-adds it when you start interacting with the text box. You can see this when you look at the DOM Explorer while running the code.

Try this code instead:

function DisableTboxExceptActiveTxbox(txtbox) {
  $('input[id*="tbxQty"]').not(txtbox).prop("disabled", true);
}

See also this fiddle: http://jsfiddle.net/pX6Kv/2/

This selects all of the textboxes, then filters out the current textbox, then sets the remaining to disabled. Interesting bug. I'll file it with Microsoft, if it's not already.

---

You should consider adding a class to each of these textboxes rather than using [id*="tbxQty"], as it would be faster in most browsers.

Then, the CancelUpdate:

function CancelUpdate(btn) {
  $('input[id*="tbxOrderQty_"]').prop('disabled', false);
}

You may also want to be more consistent how you're going to abbreviate "textbox", as tbx, txtbox, Tbox or Txbox are all used. Just a suggestion though :)

Answer 2

Let me know if this changes anything:

function DisableTboxExceptActiveTxbox(txtbox) {    
  $("input[type=text]").click(function (e) {
    $("input[type=text]").attr("disabled", true);
    $(this).removeAttr("disabled");
  }
}