jquery .is(':disabled') not working

Question

I want to add class disabled if li has attr disabled=true. But somehow this is not working. please see if anyone can help.

$('.expandable-panel').find('.expandable').each(function () {
     if(!$(this).is(':disabled')) {
       var title = $(this).find('.expand-title');
       $(title).click(function () {
         $(this).parent().toggleClass('expanded');
       });
     }else {
       $(this).addClass('disabled');
     }
    });

.expandable-panel {
  padding: 0;
  margin: 0;
  list-style: none;
}
li.disabled {background: red;}
.expandable-panel > li {
  border: 1px solid #c7d0d8;
  border-radius: 3px;
  background: #ffffff;
  margin-bottom: 10px;
}
.expandable-panel > li .expand-title {
  background: none;
  font-weight: normal;
  width: 100%;
  text-align: left;
  position: relative;
  padding-right: 36px;
}
.expandable-panel > li .expand-title:after {
  position: absolute;
  right: 16px;
  top: 14px;
  border: 5px transparent solid;
  content: ' ';
  border-top-color: #669BC6;
}
.expandable-panel > li:hover {
  border-color: #99A6B5;
}
.expandable-panel > li:hover .expand-title:after {
  border-top-color: #136FD5;
}
.expandable-panel > li .panel-content {
  visibility: hidden;
  opacity: 0;
  height: 0;
  transition: all 0.3s ease;
}
.expandable-panel > li .panel-content > .content {
  padding: 1.2em;
}
.expandable-panel .expanded {
  border: 1px solid #99A6B5;
}
.expandable-panel .expanded .panel-content {
  visibility: visible;
  opacity: 1;
  height: auto;
}
.expandable-panel .expanded .expand-title {
  border-bottom: 1px solid #99A6B5;
  border-radius: 3px 3px 0 0;
}
.expandable-panel .expanded .expand-title:after {
  top: 8px;
  border: 5px transparent solid;
  content: ' ';
  border-bottom-color: #669BC6;
}
.expandable-panel .expanded:hover .expand-title:after {
  border-top-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="expandable-panel">
        <li class="expandable" disabled="true">
          <button class="expand-title">
            Disabled Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </button>
          <div class="panel-content">
            <div class="content">
              Content
            </div>
          </div>
        </li>
        <li class="expandable" disabled="false">
          <button class="expand-title">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </button>
          <div class="panel-content">
            <div class="content">
              <form>
                <ul>
                  <li>
                    <label>Label</label>
                    <input type="text"/>
                  </li>
                  <li>
                    <label>Label</label>
                    <ul>
                      <li>
                        <input type="radio" id="default" name="radio" value="Default">
                        <label for="default">Item to Select</label>
                      </li>
                      <li>
                        <input type="radio" id="selected" name="radio" value="Selected" checked>
                        <label for="selected">Selected Item</label>
                      </li>
                      <li>
                        <input type="radio" id="disabled" name="radio" value="Disable">
                        <label for="disabled">Item to Select</label>
                      </li>
                    </ul>
                  </li>
                </ul>
              </form>
            </div>
          </div>
        </li>
      </ul>

The problem is because the `.expandable` elements are `li` which cannot have the `disabled` attribute. Use a class on them instead, and use that in the `:not` selector — Rory McCrossan, Feb 19 '18 at 10:14
^^ see [the spec](https://html.spec.whatwg.org/#the-li-element). While it's *possible* to check `li` elements for invalid attributes like that, `:disabled` won't. — T.J. Crowder, Feb 19 '18 at 10:15

score 3 · Accepted Answer · answered Feb 19 '18 at 10:15

The problem is because the .expandable elements are li which cannot have the disabled attribute. Use a class on them instead, and use that in the :not selector:

$('.expandable-panel').find('.expandable').each(function() {
  if (!$(this).is('.disabled')) {
    $(this).find('.expand-title').click(function() {
      $(this).parent().toggleClass('expanded');
    });
  }
});

.expandable-panel {
  padding: 0;
  margin: 0;
  list-style: none;
}

li.disabled {
  background: red;
}

.expandable-panel > li {
  border: 1px solid #c7d0d8;
  border-radius: 3px;
  background: #ffffff;
  margin-bottom: 10px;
}
.expandable-panel > li.disabled {
  pointer-events: none;
}

.expandable-panel > li .expand-title {
  background: none;
  font-weight: normal;
  width: 100%;
  text-align: left;
  position: relative;
  padding-right: 36px;
}

.expandable-panel > li .expand-title:after {
  position: absolute;
  right: 16px;
  top: 14px;
  border: 5px transparent solid;
  content: ' ';
  border-top-color: #669BC6;
}

.expandable-panel > li:hover {
  border-color: #99A6B5;
}

.expandable-panel > li:hover .expand-title:after {
  border-top-color: #136FD5;
}

.expandable-panel > li .panel-content {
  visibility: hidden;
  opacity: 0;
  height: 0;
  transition: all 0.3s ease;
}

.expandable-panel > li .panel-content > .content {
  padding: 1.2em;
}

.expandable-panel .expanded {
  border: 1px solid #99A6B5;
}

.expandable-panel .expanded .panel-content {
  visibility: visible;
  opacity: 1;
  height: auto;
}

.expandable-panel .expanded .expand-title {
  border-bottom: 1px solid #99A6B5;
  border-radius: 3px 3px 0 0;
}

.expandable-panel .expanded .expand-title:after {
  top: 8px;
  border: 5px transparent solid;
  content: ' ';
  border-bottom-color: #669BC6;
}

.expandable-panel .expanded:hover .expand-title:after {
  border-top-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="expandable-panel">
  <li class="expandable disabled">
    <button class="expand-title">
      Disabled Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </button>
    <div class="panel-content">
      <div class="content">
        Content
      </div>
    </div>
  </li>
  <li class="expandable">
    <button class="expand-title">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </button>
    <div class="panel-content">
      <div class="content">
        <form>
          <ul>
            <li>
              <label>Label</label>
              <input type="text" />
            </li>
            <li>
              <label>Label</label>
              <ul>
                <li>
                  <input type="radio" id="default" name="radio" value="Default">
                  <label for="default">Item to Select</label>
                </li>
                <li>
                  <input type="radio" id="selected" name="radio" value="Selected" checked>
                  <label for="selected">Selected Item</label>
                </li>
                <li>
                  <input type="radio" id="disabled" name="radio" value="Disable">
                  <label for="disabled">Item to Select</label>
                </li>
              </ul>
            </li>
          </ul>
        </form>
      </div>
    </div>
  </li>
</ul>

Also note that I set pointer-events: none on the disabled .expandable so that the click isn't even registered in the UI.

jquery .is(':disabled') not working

1 Answers1