Question

我正在尝试检查其中一个输入是否已填满，但工作不正常。规则是：

如果填写了两个字段，请启用按钮
如果字段1（text1）已填满且字段2（text2）为空，请启用该按钮。
如果字段2（text2）已填满且字段1（text1）为空，请启用该按钮。
如果两者都为空，请不要启用该按钮。知道什么是错的？谢谢！

if (($('[name=text1]').val() != '') && ($('[name=text2]').val() != '')) {
  $('[name=text1]').parent().removeClass('empty started bloked').addClass('filled');
  $('[name=text2]').parent().removeClass('empty started bloked').addClass('filled');
  console.log("C1");
} else if (($('[name=text1]').val() != '') && ($('[name=text2]').val() == '')) {
  $('[name=text2]').parent().removeClass('empty started bloked').addClass('filled');
  $('[name=text1]').parent().removeClass('empty started bloked').addClass('filled');
  console.log("C2");
} else if (($('[name=text1]').val() == '') && ($('[name=text2]').val() != '')) {
  $('[name=text2]').parent().removeClass('empty started bloked').addClass('filled');
  $('[name=text1]').parent().removeClass('empty started bloked').addClass('filled');
  console.log("C3");
} else {
  $('[name=text1]').parent().removeClass('filled').addClass('empty started bloked');
  $('[name=text2]').parent().removeClass('filled').addClass('empty started bloked');
  console.log("C4");
}

input[name="text1"],
input[name="text2"] {
  border: 1px green solid;
}

.filled input[name="text1"],
.filled input[name="text2"] {
  border: 1px green solid;
}

.empty input[name="text1"],
.started input[name="text1"],
.bloked input[name="text1"],
.empty input[name="text2"],
.started input[name="text2"],
.bloked input[name="text2"] {
  border: 1px red solid;
}

.buy-button {
  background-color: gray;
  width: 100px;
  padding: 20px;
  margin: 10px;
  color: #fff;
  text-align: center;
}

.buy-button.enable {
  background-color: red !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="detailsSku__names">

  <div class="detailsSku__label">
    <input type="text" placeholder="text 1*" name="text1" class="text1" data-target="previewText1" maxlength="11">
  </div>
  <br />
  <div class="detailsSku__label">
    <input type="text" placeholder="text 2" value="" name="text2" class="text2" data-target="previewText2" maxlength="11">
  </div>

</div>
<a class="buy-button" href="#">Comprar</a>

Answer 1

尝试使用我做的修改。

<button id="buy-button" disabled=true>Comprar</button>

<script>
$('input[name="text1"], input[name="text2"]').on('blur',function(){
var a = $('.text1').val().trim().length;
var b = $('.text2').val().trim().length;
if (a!=0 && b!=0){
    $('#buy-button').attr('disabled', false);
} else if (a!=0 && b==0) {
    $('#buy-button').attr('disabled', false);
} else if (b!=0 && a==0) {
    $('#buy-button').attr('disabled', false);
} else {
    $('#buy-button').attr('disabled', true);
}
});
</script>

Answer 2

它在你的情况下不起作用的主要原因 - 你忘记在输入时重新检查输入状态。我认为，我已经减少了你的例子中不必要的JS的数量，并以更正确的方式使用它。请参阅下面的代码段

$('[name=text1], [name=text2]').on('input', function() {
    if ($('[name=text1]').val() || $('[name=text2]').val()) {
        $('.buy-button').addClass('enable');
    } else {
        $('.buy-button').removeClass('enable');
    }
});

input[name="text1"],
input[name="text2"] {
  border: 1px green solid;
}

.filled input[name="text1"],
.filled input[name="text2"] {
  border: 1px green solid;
}

.empty input[name="text1"],
.started input[name="text1"],
.bloked input[name="text1"],
.empty input[name="text2"],
.started input[name="text2"],
.bloked input[name="text2"] {
  border: 1px red solid;
}

.buy-button {
  background-color: gray;
  width: 100px;
  padding: 20px;
  margin: 10px;
  color: #fff;
  text-align: center;
}

.buy-button.enable {
  background-color: red !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="detailsSku__names">

  <div class="detailsSku__label">
    <input type="text" placeholder="text 1*" name="text1" class="text1" data-target="previewText1" maxlength="11">
  </div>
  <br />
  <div class="detailsSku__label">
    <input type="text" placeholder="text 2" value="" name="text2" class="text2" data-target="previewText2" maxlength="11">
  </div>

</div>
<a class="buy-button" href="#">Comprar</a>

Answer 3

因为你正在使用AND。

if (($('[name=text1]').val() != '') || ($('[name=text2]').val() != '')) {
   if ($('[name=text1]').val() != '') {
      $('[name=text1]').parent().removeClass('empty started  bloked').addClass('filled'); 
   }else{
      $('[name=text2]').parent().removeClass('empty started bloked').addClass('filled');
   }
}else {
   $('[name=text1]').parent().removeClass('filled').addClass('empty started bloked');
   $('[name=text2]').parent().removeClass('filled').addClass('empty started bloked');
}

仅需一个输入

3 个答案: