Check if a div is disabled jQuery

Question

I need to check whether myDiv1 is disabled. If so, I need to hide myDiv2 , otherwise I need to show myDiv2 .

Here is what I have so far:

$(document).ready(function () {
    var isDisabled = $('#myDiv1').is('[disabled=disabled]')
    alert(isDisabled); //this always returns false
    if(isDisabled)
        $("#myDiv2").hide();
    else
        $("#myDiv2").show()
});

But isDisabled return always false even when myDiv1 is enabled. What am I missing here?

Answer 1

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

Answer 2

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 .

Answer 3

Use this one:

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

Answer 4

I hope this will help you:

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

Answer 5

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

Answer 6

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

Answer 7

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>

Answer 8

If you look at this MDN HTML attribute reference , you will note that the disabled attribute should only be used on the following tags:

button, command, fieldset, input, keygen, optgroup, option, select, textarea

You can choose to create your own HTML data-* attribute (or even drop the data-) and give it values that would denote the element being disabled or not. I would recommend differentiating the name slightly so we know its a custom created attribute.

How to use data attributes

For example:

$('#myDiv1').attr('data-disabled') == "disabled"

Answer 9

Set the disabled attribute on any HtmlControl object. 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>

Answer 10

Why don't you use CSS?

html:

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

css:

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