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

Demo

Try before buy

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.

$('#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.

Use this one

$(document).ready(function () {
    if($('#myDiv1').is(':disabled'))
       $("#myDiv2").hide();
    else
      $("#myDiv2").show()
});

Hope this will help you

$(document).ready(function () {
    var isDisabled = $('#myDiv1').is(':disabled')
    if(isDisabled)
       $("#myDiv2").hide();
    else
      $("#myDiv2").show()
});

Try this

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]')

Use $("#div1").prop("disabled") to check whether the div is disabled or not. Here is a sample snippet to implement that.

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style>
        .container {
            width: 100px;
            height: 100px;
            background: grey;
            margin: 5px;
            float: left;
        }
        div {
            width: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <div>
        <input type="checkbox" id="ChkBox" onclick="UpdaieDivStatus()" /> Toggle access
    </div>
    <div id="div1" class="container">Div 1</div>
    <div id="div2" class="container">Div 2</div>


    <script>
        function UpdaieDivStatus() {
            if ($("#ChkBox").prop('checked')) {
                $("#div1").prop("disabled", true);
            } else {
                $("#div1").prop("disabled", false);
            }
            if ($('#div1').prop('disabled')) {
                $("#div2").hide();
            } else {
                $("#div2").show();
            }
            console.log($("#div1").prop("disabled"));
        }
    </script>

</body>

</html>

Why don't you use CSS?

html:

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

css:

#isMyDiv {
    /* your awesome styles */
}
#isMyDiv[disabled] {
    display: none
}

Set Disabled attribute on any HtmlControl object. And in your example it renders as

<div id="myDiv1" disabled="disabled"><div>
<div id="myDiv2" ><div>

and in javascript can be checked like

('#myDiv2').attr('disabled') !== undefined

$(document).ready(function () {
      if($('#myDiv1').attr('disabled') !== undefined)
        $("#myDiv2").hide();
    else
      $("#myDiv2").show()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="myDiv1" disabled="disabled">Div1<div>
  <div id="myDiv2" >Div1<div>