Question

我有一点codepen，您可以在其中选择多个标签（使用jQuery可选小部件）。我想执行以下操作：如果没有项目获得类名.ui-selected，则输入#plannername将被禁用。我认为这样的事情应该有效：

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

但这并不奏效。我创建了以下内容：

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

这给了我选择正确数量的标签。

＆＃13;

$(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('');
    });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您需要做的是在单击其中一个选项的操作发生后删除已禁用的标记。基本上，您应该做的是默认情况下将字段设置为禁用，然后在选择后启用它：

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

我已经创建了一个更新的CodePen，展示了这个here。

希望这有帮助！：）

没有项目获得特定类名时禁用输入

1 个答案: