1

I'm having issues with attr('disabled', 'disabled') or prop("disabled", true) in internet explorer with jQuery In firefox, and chrome, this behaves as expected. Any ideas?

I am trying to disable an item in the dropdown list in my MVC application. It doesn't work in IE.

var count = parseInt($("#numCount").val());
    if ((isNaN(count) === false) && (count > 500)) {
        $("#ReportType option[value='Report']").attr("disabled", "disabled");
        $("#ReportType option[value='Report']").prop("disabled", true);

    }
BumbleBee
  • 10,429
  • 20
  • 78
  • 123
  • What issues are you having? Which version of jQuery and IE are you using? – roberto May 14 '13 at 23:49
  • jQuery 1.8.1, IE 9 & 10 – BumbleBee May 14 '13 at 23:55
  • Can you check the HTML after your JavaScript is executed and post that? – Dan-Nolan May 14 '13 at 23:56
  • Some *(all?)* versions of IE don't allow individual options to be disabled. –  May 14 '13 at 23:58
  • 1
    There are about 10 similar questions on stackoverflow... e.g. http://stackoverflow.com/questions/11752097/disable-drop-down-option-using-jquery – Philipp May 14 '13 at 23:59
  • Check if your page is triggering quirks mode in IE. It should work in those higher versions of IE. You can check with the developer tools. – Ja͢ck May 15 '13 at 00:02
  • @squint: it seems to be possible (according to similar questions), I also checked with IE F12 on version 9 with adding the attribute disabled="disabled" – Philipp May 15 '13 at 00:02
  • Are you using native HTML select fields? If you're using something like chosen etc. you'll also need to call an update function after manipulating the option elements. – wyqydsyq May 15 '13 at 00:52

3 Answers3

2

This should actually work on IE 9+, maybe even IE 8.

Reasons why this may not work is when the browser is forced into IE 7 behaviour:

  1. A <meta> tag may have been used to emulate IE7 (this was often done in the past for older sites to keep working).

  2. Something else may have triggered quirks mode, and all bets are off when that happens.

The developer tools (F12) can help you here.

Ja͢ck
  • 170,779
  • 38
  • 263
  • 309
0

Try this:

http://jsfiddle.net/ChuJh/2/

$('#ReportType > option[value="Report"]').attr('disabled', 'disabled');

That works for me in IE 10, FF, etc.

Hope it helps.

Daniel
  • 1,424
  • 1
  • 12
  • 19
  • Nope, it has ">" between the PARENT and the CHILD selector. More info about this kind of selector can be found @ http://api.jquery.com/child-selector/ – Daniel May 15 '13 at 01:06
  • I know what the selector does, but you didn't explain why it would work when the regular descendant selector doesn't. Your fiddle still works if you omit the child selector. – Dennis May 15 '13 at 01:10
  • In this specific case both selectors should work, but they are different. One filters direct descendants (>) and the other is recursive (-space-). And you are correct, I did not explain why it would not work, that is why I said "Try this". I probably should have added more to the answer. – Daniel May 15 '13 at 01:35
  • Nobody is stopping you from adding more now :) – Ja͢ck May 15 '13 at 01:55
0

Small possibility that parseInt is causing the problem here.

Try changing:

parseInt($("#numCount").val())

To:

parseInt($("#numCount").val(), 10)

Or:

Number($("#numCount").val())
Samuel Liew
  • 76,741
  • 107
  • 159
  • 260