CODEWITHSUNDEEP
jqueryasp.nettextboxinternet-explorer-10
sd4ksb
sd4ksb

Reputation: 251

IE10 - textbox attribute disabled/enabled

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

Upvotes: 2

Views: 2253

Answers (2)

Heretic Monkey
Heretic Monkey

Reputation: 12108

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 :)

Upvotes: 4

user3743250
user3743250

Reputation: 89

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

Upvotes: -1

Related Questions