当两个输入字段都填满时，如何从div中删除类？

Question

我有3个输入字段和一个特定的div。我想要的是仅当使用jquery填充3个输入字段时，才从该div中删除类“ disable”。

我的问题是，如果您在“标题”字段中输入内容，则会立即从div中删除“禁用”类，而忽略其他2个空字段。

这里也是JSFIDDLE

$('#price' && '#category' && '#title').on('keyup', function(){
$("#next-btn1").toggleClass('disable', $('#price' && '#category' && '#title').val()==''); 
})

#next-btn1 {
  margin-top:20px;
  background:#0088cc;
  color:#ffffff;
  width:150px;
  text-align:center;
  font-weight:bold;
  height:48px;
  line-height:48px;
  cursor:pointer;
  display:inline-block;
  font-size:1em;
  margin-left:10px;
}

#price, #category, #title {
  height:43px;
  line-height:43px;
  font-weight:bold;
  color:#585858;
  display:inline-block;
  font-size:1em;
  margin-bottom:8px;
}

.disable {
  color:#aaa!important;
  background:#ddd!important;
  pointer-events:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input autocomplete="off" id="price" placeholder="Enter Product Price"/> 
<input autocomplete="off" id="category" placeholder="Enter a category"/>
<input autocomplete="off" id="title" placeholder="Enter your title"/> 
<div class="disable"  id="next-btn1">
  Next Step
</div>

Answer 1

在输入字段中添加一个通用类，例如inputField，然后将jquery更改为此。

$('.inputField').on('keyup', function(){
    if($('#price').val() == '' || $('#category').val() == '' || $('#title').val() == '') {
    $("#next-btn1").addClass('disable');
  }else {
    $("#next-btn1").removeClass('disable');
  }
});

Answer 2

尝试关注

将相同的课程添加到您的文本框并在该课程上调用事件

$(document).on('keyup mouseleave','.ChechValue', function(){
ChechValue()
});
function ChechValue()
{
if($('#price').val().trim()!='' && $('#category').val().trim()!='' && $('#title').val().trim()!='')
{
$("#next-btn1").removeClass('disable');
}
else
{
$("#next-btn1").addClass('disable');
}
}

#next-btn1 {
  margin-top:20px;
  background:#0088cc;
  color:#ffffff;
  width:150px;
  text-align:center;
  font-weight:bold;
  height:48px;
  line-height:48px;
  cursor:pointer;
  display:inline-block;
  font-size:1em;
  margin-left:10px;
}

#price, #category, #title {
  height:43px;
  line-height:43px;
  font-weight:bold;
  color:#585858;
  display:block;
  font-size:1em;
  margin-bottom:8px;
}

.disable {
  color:#aaa!important;
  background:#ddd!important;
  pointer-events:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input autocomplete="off" class="ChechValue" id="price" placeholder="Enter Product Price"/> 
<input autocomplete="off" class="ChechValue" id="category" placeholder="Enter a category"/>
<input autocomplete="off" class="ChechValue" id="title" placeholder="Enter your title"/> 
<div class="disable"  id="next-btn1">
  Next Step
</div>