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> 

Answer 1

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.