Check if a div is disabled jQuery

So many answers, but none addressing the actual problem: A div element doesn't allow an attribute of type disabled. On a div only global attributes are allowed, whereas disabled is allowed on form elements.

You can easily verify it by testing this HTML:

<div id="a" disabled></div>
<input id="b" disabled>

against this JavaScript:

var e = $('#a');
alert(e.is(':disabled'));

var e = $('#b');
alert(e.is(':disabled'));

Which will return false and true.

What's a solution then?

If you want to have an attribute that is actually named disabled use a data-* attribute:

<div id="c" data-disabled="true"></div>

And check it using this JavaScript:

var e = $('#c');
alert(e.data('disabled'));

or:

var e = $('#c');
alert('true' === e.attr('data-disabled'));

Depending on how you're going to handle attached data-*-attributes. Here you can read more about jQuery's .data() which is used in the first example.

Demo:

Try before buy

$('#myDiv1').attr('disabled') == "disabled" ? $("#myDiv2").hide() : $("#myDiv2").show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='myDiv1' disabled="true">1</div>
<div id='myDiv2'>2</div>

Try this way. But i dont think div has disable attribute or property

$('#myDiv1[disabled=true]').length > 0 ? $("#myDiv2").hide() : $("#myDiv2").show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='myDiv1' disabled="true">1</div>
<div id='myDiv2'>2</div>

Using attribute selector

attribute selector

Description: Selects elements that have the specified attribute with a value exactly equal to a certain value.

The reason why isDisabled returns false to you is, because you have most likely set the following in your HTML:

<div id = "myDiv1" disabled>...</div>

In reality, disabled means disabled = "", so, since "disabled" != "", if you keep using $('#myDiv1').is('[disabled=disabled]') you will always get false.

What will work:

To make this work, as other answers have mentioned, you can use:

1. $('#myDiv1').attr('disabled') == "disabled" (@guradio answer),
2. $('#myDiv1').is('[disabled=""]') or
3. $('#myDiv1')[0].getAttribute("disabled") != null.

What won't work:

1. While $('#myDiv1')[0].getAttribute("disabled") != null will work regardless of what element the attribute is set on, on the other hand, $('#myDiv1')[0].disabled will only work on 'form elements' and will return undefined for all others (check out the note at the end).
2. The same occurs when you use $('#myDiv1').is(':disabled') as well.

Alternatively, if you want to keep your code intact, you can set disabled = "disabled" in your HTML and the problem will be solved.

Working Example (using 2.):

/* --- JavaScript --- */
$(document).ready(function(isDisabled) {
  isDisabled = $('#myDiv1').is('[disabled=""]');
  if (isDisabled) $("#myDiv2").hide();
  else $("#myDiv2").show()
  
  /* Will return 'true', because disabled = "" according to the HTML. */
  alert(isDisabled);
});

<!--- HTML --->
<script src = "//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "myDiv1" disabled>DIV 1</div>
<div id = "myDiv2">DIV 2</div>

Note: Beware, however, that the disabled attribute is meant to be used with 'form elements' rather than anything else, so be sure to check out the very informative answer of @insertusernamehere for more on this. Indicatively, the disabled attribute is meant to be used with the following elements:

1. button,
2. fieldset (not supported by IE),
3. input,
4. keygen (not supported by IE),
5. optgroup (supported by IE8+),
6. option (supported by IE8+),
7. select and
8. textarea.

First you need to set disabled property for your div

<div id="myDiv" disabled="disabled">This is Div</div>

Then you need to use this

 $('#myDiv1').is('[disabled=disabled]')