Disable input when no item got specific class name

Question

I got a little codepen where you can select multiple tabs (with jQuery selectable widget). I wanna do the following: If no item got the class name .ui-selected the input #plannername gets disabled. I thought something like this should work:

if ($('.ui-selected').length === 0){
   $('#plannername').prop('disabled', true);
}
else{
   $('#plannername').prop('disabled', false);
}

But that doesn't work. I created the following:

var count = $('.ui-selected').length;
console.log(count);

That's giving me the correct amount of tabs selected.

$(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()) > -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('<li>' + val + '</li>');
        e.preventDefault();
        $('#plannername').val('');
    });
});

*{
  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;
}

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<form id="plannerform">
    <input id="plannername" placeholder="insert name" type="text" autocomplete="off"></input><!--
    --><input id="plannersubmit" type="submit" value="sign up"></input>
</form>
<ol id="selectable">
  <li class="ui-widget-content">FR PM</li>
  <li class="ui-widget-content">SA AM</li>
  <li class="ui-widget-content">SA PM</li>
  <li class="ui-widget-content">SO AM</li>
  <li class="ui-widget-content">SO PM</li>
  <li class="ui-widget-content">MO AM</li>
</ol>
<div id="content">
  <section class="tabcontent">
    <ul class="plannerlist">
    </ul>
  </section>
  <section class="tabcontent">
    <ul class="plannerlist">
    </ul>  
  </section>
  <section class="tabcontent">
    <ul class="plannerlist">
    </ul>
  </section>
  <section class="tabcontent">
    <ul class="plannerlist">
    </ul>
  </section>
  <section class="tabcontent">
    <ul class="plannerlist">
    </ul>  
  </section>
  <section class="tabcontent">
    <ul class="plannerlist">
    </ul> 
  </section>
</div>

score 1 · Accepted Answer · answered Feb 19 '17 at 22:34

What you need to do is remove the disabled flag once the action of clicking one of the options has taken place. Essentially, what you should do is set the field to disabled by default, then enable it once a selection has been made:

$(function() {
  $('#plannername').prop('disabled', true);
  function selectionChange(event, ui) {
    ('#plannername').prop('disabled', false);
  }
}

I've created an updated CodePen showcasing this here.

Hope this helps! :)

Oh didn't thought of that I can use the selectionChange. awesome answer! — Tobias Glaus, Feb 19 '17 at 22:39

Disable input when no item got specific class name

1 Answers1