javascript - jQuery 对数字输入没有反应

Question

我有这段代码，如果我填写特定的输入字段，那么它将“启用”或在这种情况下删除一个类，但是当涉及到填写数字的输入字段时，它不会对输入使用react填充的数字的值。我希望它在填写内容后启用按钮。

我正在设置一个验证，当没有填写所有字段时，您不能转到下一页，但在此之前您需要填写所有字段。

HTML

<input id="LAMINAAT" type="radio" name="group1" onclick="myFunction()" 
value="Laminaat" />
<label for="LAMINAAT">Laminaat</label>
<input id="PARKET" type="radio" name="group1" onclick="myFunction()" value="Parket" />
<label for="PARKET">Parket</label>
<input id="PVC" type="radio" name="group1" onclick="myFunction()" value="Pvc" />
<label for="PVC">PVC</label>
<hr>
<input id="JA2" type="radio" name="group3" value="Ja">
<label for="JA2" class="form-field__radio__label">Ja, meerprijs €1.50 per m<sup>2</sup></label><br>
<input id="NEE2" type="radio" name="group3" onclick="JaNeeFirst()" value="Nee">
<label for="NEE2">Nee</label>

<div id="form_JA2" class="desc desc3" style="float: inherit;">
  <h5>Hoeveel m<sup>2</sup> ondervloer wil je laten leggen?</h5>
  <input type="number" id="ondervloer" name="ondervloeren">
</div>
<hr>
<input id="JA3" type="radio" name="group4" value="Ja">
<label for="JA3" class="form-field__radio__label">Ja</label><br>
<input id="NEE3" type="radio" name="group4" onclick="JaNeeSecond()"     value="Nee">
<label for="NEE3">Nee</label>
<hr>
<input id="JA4" type="radio" name="group5" value="Ja">
<label for="JA4" class="form-field__radio__label">Ja, meerprijs €5.00 per meter</label><br>
<input id="NEE4" type="radio" name="group5" onclick="JaNeeThirth()" value="Nee">
<label for="NEE4">Nee</label>
<hr>
<input id="JA5" type="radio" name="group6" value="Ja">
<label for="JA5" class="form-field__radio__label">Ja, meerprijs €2.50 per m<sup>2</sup></label><br>
<input id="NEE5" type="radio" name="group6" onclick="JaNeeFourth()" value="Nee">
<label for="NEE5">Nee</label>
<hr>
<input id="JA6" type="radio" name="group7" value="Ja">
<label for="JA6" class="form-field__radio__label">Ja, meerprijs €20.00 per deur</label><br>
<input id="NEE6" type="radio" name="group7" onclick="JaNeeFifth()" value="Nee">
<label for="NEE6">Nee</label>
<hr>
<input id="JA7" type="radio" name="group8" value="Ja">
<label for="JA7" class="form-field__radio__label">Ja, meerprijs €20.00 per plint</label><br>
<input id="NEE7" type="radio" name="group8" onclick="JaNeeSixth()" value="Nee">
<label for="NEE7">Nee</label>
<hr>

<input id="tweedebutton" type="button" value="volgende stap" onclick="show_next('user_details','qualification','bar2'); topFunction()" />

jQuery

$(document).ready(function () {
  $("#tweedebutton").addClass("disabledbuttonNext");
  $('input[type="radio"]').on('change', function () {
    if ($('#LAMINAAT').is(":checked") && $('input[name="group3"]').is(":checked") && $('input[name="group4"]').is(":checked") && $('input[name="group5"]').is(":checked") && $('input[name="group7"]').is(":checked") && $('input[name="group8"]').is(":checked") ) {
      $("#tweedebutton").removeClass("disabledbuttonNext");
    } else if ($('#PARKET').is(":checked") && $('input[name="group3"]').is(":checked") && $('input[name="group4"]').is(":checked") && $('input[name="group5"]').is(":checked") && $('input[name="group7"]').is(":checked") && $('input[name="group8"]').is(":checked") && $('input[name="group6"]').is(":checked") ){
      $("#tweedebutton").removeClass("disabledbuttonNext");
    } else if ($('#PVC').is(":checked") && $('input[name="group3"]').is(":checked") && $('input[name="group4"]').is(":checked") && $('input[name="group5"]').is(":checked") && $('input[name="group7"]').is(":checked") && $('input[name="group8"]').is(":checked") ) {
      $("#tweedebutton").removeClass("disabledbuttonNext");
    }
    else{
      $("#tweedebutton").addClass("disabledbuttonNext");
    }
  });
});

$(document).ready(function () {
  $('input[type="radio"], input[type="number"]').on('change', function () {
    if ( $('#JA2').is(":checked") && $('#ondervloer').val() == '' ) {
      $("#tweedebutton").addClass("disabledbuttonNext");
    }
  });
});

CSS

.disabledbuttonNext {
pointer-events: none;
opacity: 0.5;
}

我希望结果是当我填写所有内容并在数字输入中填写一些内容(例如:'1')时它会立即使用react并启用按钮或在这种情况下添加一个类。

Answer 1

下面是与您的应用程序类似的代码。

它与“单选按钮” 以及“输入框”交互并相应地触发“提交按钮”。

function checkout() {
  alert("It worked");
}

$(document).ready(function() {
  //console.log("Document loaded !");

  $("input").change(function() {

    var snacksValue = $('input[name="snacks"]:checked').val();
    var extrasValue = $('input[name="extras"]:checked').val();
    var quantity = $('#input1').val();

    if (snacksValue != undefined && extrasValue != undefined && quantity != '') {
      //console.log("go");
      $('#checkout').removeClass("disabled");
      $('#checkout').addClass("enabled");
    } else {
      //console.log("error");
      $('#checkout').removeClass("enabled");
      $('#checkout').addClass("disabled");
    }

  });

});

div {
  margin: 10px 5px;
}

.enabled {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.disabled {
  background-color: #e7e7e7;
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  pointer-events: none;
  /* display:none; */
  /* If you wanna hide it */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div>

  <label>
  <input type="radio" name="snacks" value="burger" />
  Burger</label>
  <label>
  <input type="radio" name="snacks" value="pizza" />Pizza</label>
  <label>
  <input type="radio" name="snacks" value="hotdog" /> Hotdog</label>

</div>

<div>

  <label>
  <input id="extra1" type="radio" name="extras" value="cheese">
  With Cheese</label>

  <label>
  <input id="extra2" type="radio" name="extras" value="nocheese">
  Without Cheese</label>

</div>

<div>

  <label>Quantity</label>
  <input id="input1" type="number" value="" min=1>

</div>

<div>

  <input id="checkout" class="disabled" type="button" value="Next" onclick="checkout();" />

</div>