CODEWITHSUNDEEP
javascriptjquery
Pissu Pusa
Pissu Pusa

Reputation: 1374

Check if a div is disabled jQuery

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?

Upvotes: 15

Views: 46472

Answers (10)

insertusernamehere
insertusernamehere

Reputation: 23570

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

Upvotes: 30

sahil-sethi
sahil-sethi

Reputation: 122

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"

Upvotes: 1

Nitheesh
Nitheesh

Reputation: 19986

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>

Upvotes: 1

Abi
Abi

Reputation: 734

I hope this will help you:

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

Upvotes: 1

Jignesh Hirpara
Jignesh Hirpara

Reputation: 135

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>

Upvotes: 0

Shantaram Tupe
Shantaram Tupe

Reputation: 1666

Use this one:

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

Upvotes: 1

Abi
Abi

Reputation: 734

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

Upvotes: 1

Angel Politis
Angel Politis

Reputation: 11313

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.

Upvotes: 7

Tusko Trush
Tusko Trush

Reputation: 430

Why don't you use CSS?

html:

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

css:

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

Upvotes: 0

guradio
guradio

Reputation: 15555

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

Upvotes: 1

Related Questions