title: Disable input when no item got specific class name
body: <p>I got a little <a href="http://codepen.io/tobiasglaus/pen/xgBeaJ" rel="nofollow noreferrer">codepen</a> where you can select multiple tabs (with jQuery selectable widget). I wanna do the following: If no item got the class name <code>.ui-selected</code> the input <code>#plannername</code> gets disabled.
  I thought something like this should work:</p>
  
  <pre><code>if ($('.ui-selected').length === 0){
     $('#plannername').prop('disabled', true);
  }
  else{
     $('#plannername').prop('disabled', false);
  }
  </code></pre>
  
  <p>But that doesn't work. I created the following:</p>
  
  <pre><code>var count = $('.ui-selected').length;
  console.log(count);
  </code></pre>
  
  <p>That's giving me the correct amount of tabs selected.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
      // define one function, to be used for both select/unselect
      function selectionChange(event, ui) {
          // Get indexes of selected items in an array
          var items = $('.ui-selected', this).map(function () {
              return $(this).index();
          }).get();
          // Show or hide sections according to the corresponding option's selection
          $("section").each(function () {
              $(this).toggle(items.indexOf($(this).index()) &gt; -1);
          });
          console.log(items);
          var count = $('.ui-selected').length;
          console.log(count);
      }
  
      $("#selectable").selectable();
      $("#selectable").selectable({
          selected: selectionChange,
          unselected: selectionChange
      });
  });
  
  
  $(function(){
      $('#plannerform').submit(function(e){
          var val = $(this).find('#plannername').val();
          $('ul.plannerlist:visible').append('&lt;li&gt;' + val + '&lt;/li&gt;');
          e.preventDefault();
          $('#plannername').val('');
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
    font-family: 'Josefin Sans', sans-serif;
    margin: 0; 
    padding: 0; 
    box-sizing: border-box;
  }
  #selectable .ui-selecting { 
    background: #9eefbc;
    transition:.8s ease-in-out;
    -webkit-transition: -webkit-transform 0.8s, background-color 0.8s;
   transition: transform 0.8s, background-color 0.8s;
   -webkit-transform: perspective(300px) rotate3d(1,0,0,-180deg);
   transform: perspective(300px) rotate3d(1,0,0,-180deg);
   -webkit-transform-origin: 50% 100%;
   transform-origin: 50% 100%;
   -webkit-perspective-origin: 50% 100%;
   perspective-origin: 50% 100%;
  }
  #selectable .ui-selected { 
    background: #6dce91; 
    transition:all 0.8s;
  }
  #selectable { 
    list-style-type: none; 
    position:absolute;
    width: 60%;
    margin-left:20%;
    display:flex;
    transition:.3s ease-in-out;
    z-index:1;
    margin-top:3px;
  }
  #selectable li { 
    background:#ddffea;
    padding: 0.6em; 
    font-size: 1.4em; 
    flex-grow:1;
    transition:.3s ease-in-out;
    border:none;
    text-align:center;
    line-height:0.8em;
  }
  
  #selectable .ui-selected:after,
  #selectable .ui-selected::after {
      position: absolute;
      top: 44px;
      margin-left:-50px;
      transition: .2s ease-in-out;
      content: '';
      width: 0;
      height: 0;
      opacity:1;
      animation:dreieckFade 1s forwards;
      border-top: solid 15px #6dce91;
      border-left: solid 20px transparent;
      border-right: solid 20px transparent;
  }
  
  @keyframes dreieckFade{
      0%{opacity:0;border-top: solid 0px #6dce91;}
      100%{opacity:1;border-top: solid 15px #6dce91;}
  }
  
  .ui-selectable-helper {
    visibility: hidden;
  }
  
  #content{
    width:60%;
    background-color:#9eefbc;
    margin-left:20%;
    padding-top:70px;
    margin-top:3px;
    padding-bottom:30px;
  }
  
  .tabcontent{
      top:44px;
      background-color:transparent;
      z-index:0;
      transition:.3s ease-in-out;
      font-size:2em;
      display:none;
      padding-left:100px;
  }
  
  #plannername{
    width:40%;
    background-color:#9eefbc;
    margin-left:20%;
    border:0;
    font-size:2em;
    padding:20px;
  }
  #plannername:focus{
    outline:0;
  }
  #plannersubmit{
    width:20%;
    background-color:#6dce91;
    border:0;
    font-size:2em;
    padding:20px;
    transition:.2s ease-in-out;
  }
  #plannersubmit:hover{
    transition:.2s ease-in-out;
    padding-left:40px;
    cursor:pointer; 
  }
  #plannersubmit:focus{
    outline:0;
  }
  #plannersubmit:active{
    color:white;
  }
  .plannerlist{
      list-style-type:none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;form id="plannerform"&gt;
      &lt;input id="plannername" placeholder="insert name" type="text" autocomplete="off"&gt;&lt;/input&gt;&lt;!--
      --&gt;&lt;input id="plannersubmit" type="submit" value="sign up"&gt;&lt;/input&gt;
  &lt;/form&gt;
  &lt;ol id="selectable"&gt;
    &lt;li class="ui-widget-content"&gt;FR PM&lt;/li&gt;
    &lt;li class="ui-widget-content"&gt;SA AM&lt;/li&gt;
    &lt;li class="ui-widget-content"&gt;SA PM&lt;/li&gt;
    &lt;li class="ui-widget-content"&gt;SO AM&lt;/li&gt;
    &lt;li class="ui-widget-content"&gt;SO PM&lt;/li&gt;
    &lt;li class="ui-widget-content"&gt;MO AM&lt;/li&gt;
  &lt;/ol&gt;
  &lt;div id="content"&gt;
    &lt;section class="tabcontent"&gt;
      &lt;ul class="plannerlist"&gt;
      &lt;/ul&gt;
    &lt;/section&gt;
    &lt;section class="tabcontent"&gt;
      &lt;ul class="plannerlist"&gt;
      &lt;/ul&gt;  
    &lt;/section&gt;
    &lt;section class="tabcontent"&gt;
      &lt;ul class="plannerlist"&gt;
      &lt;/ul&gt;
    &lt;/section&gt;
    &lt;section class="tabcontent"&gt;
      &lt;ul class="plannerlist"&gt;
      &lt;/ul&gt;
    &lt;/section&gt;
    &lt;section class="tabcontent"&gt;
      &lt;ul class="plannerlist"&gt;
      &lt;/ul&gt;  
    &lt;/section&gt;
    &lt;section class="tabcontent"&gt;
      &lt;ul class="plannerlist"&gt;
      &lt;/ul&gt; 
    &lt;/section&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>