IE 11 compatibility issue with jQuery function

Question

I've implemented the following jQuery which is simply blanking out a textfield, when a radio button is selected. On Firefox and Chrome the function is working, but on IE11, which is actually used within the working environment it is not working - the textfield is blanked out by default.

I need some help to fix this compatibility issue.

function hideMappeDigital(){
 if (jQuery("#Mappe-j_idt41-0").is(':checked')) {
  jQuery("#Mappe-Anzahl").attr("disabled", "disabled");
 }
 jQuery('#Mappe-j_idt41-0').click(function(){
  jQuery("#Mappe-Anzahl").val('');
  jQuery("#Mappe-Anzahl").attr("disabled", "disabled");
   });
 jQuery('#Mappe-j_idt41-1').click(function(){
  jQuery("#Mappe-Anzahl").removeAttr("disabled");
 });
}

Hi, one question per question please... And this is not JSF related as it seems.. I only see jquery code — Kukeltje, Sep 13 '18 at 09:45
Possible duplicate of [IE 11 v11 does not respect "disabled" property on inputs on a single machine](https://stackoverflow.com/questions/51790522/ie-11-v11-does-not-respect-disabled-property-on-inputs-on-a-single-machine) — freedomn-m, Sep 13 '18 at 09:57
In summary use `.prop` not `.attr`: `jQuery("#Mappe-Anzahl").prop("disabled", "disabled")` — freedomn-m, Sep 13 '18 at 09:57
Which version of jQuery? I created a StackBlitz from your code, please fork it to demonstrate your issue: https://stackblitz.com/edit/stack-overflow-ie-11-compatibility-issue-with-jquery-function — Lars Gyrup Brink Nielsen, Sep 13 '18 at 20:07
in StackBlitz it is working correctly. The problem is, that it is not working on the test server instance — Jan, Sep 14 '18 at 10:10
I just observed that the radio button group is permanently inactive (h:selectOneRadio) when testing the application on the testserver — Jan, Sep 14 '18 at 10:43
From your most recent comment, it seems that you are using JSF (Java Server Faces). This could indeed affect the issue. Please provide the relevant bits of JSF. — Lars Gyrup Brink Nielsen, Sep 24 '18 at 09:13

pixellab · Answer 1 · 2018-09-13T10:29:31.273

0

Please try with

jQuery("#Mappe-Anzahl").attr("disabled", true);

Also try with

jQuery("#Mappe-Anzahl").prop("disabled", true);

Also check //need to add some CSS to look like disabled

jQuery("#Mappe-Anzahl").prop("readonly", true);

edited Sep 13 '18 at 10:29

answered Sep 13 '18 at 09:53

pixellab

588
3
12

Care to add an explanation on why this would help? – Kukeltje Sep 13 '18 at 10:02
@Kukeltje I am not sure, thats why I mention try--sometime the attr not work properly thats why I mention prop, this could be conflict issue too... – pixellab Sep 13 '18 at 10:11
just tried it. I observed that the function is working localy (on IE11). But, when deploying it to a testserver, it's not working anymore, ... – Jan Sep 13 '18 at 10:25
Oh, I'm sorry it's only available within the intranet (btw.: don't have any permissions grant any access) – Jan Sep 13 '18 at 10:33
set a settimeout of 100-- if the code conflict with any other, then it will execute at last... – pixellab Sep 13 '18 at 10:43
.prop is not working (it's not even working locally). Will try it with jQuery("#Mappe-Anzahl").attr("disabled", true); on the testserver. Thanks a lot so far! :) – Jan Sep 13 '18 at 11:19

score 0 · Answer 2 · answered Sep 13 '18 at 10:19

@freedomn-m answer in the comments is the right one: IE doesn't always respect boolean attributes so you need to write disabled="disabled" and required="required" for example. Also, as of jQuery 1.6 .prop is the preferred way over .attr read the note here on the official docs

IE 11 compatibility issue with jQuery function

2 Answers2