如何检查具有相同类的多个输入的单个值。输入的重复类来自追加

时间:2017-03-14 14:32:31

标签: javascript jquery html css

jQuery似乎无法检测附加输入的值。

$(document).ready(function() {
  
var i = 1;
  
// This is where I append the additional inputs.
$('.wiz-btn-add').click(function() {
    
  i = i + 1;
    
  $('.educ-cont-add').append(
    '<div class="educ-title">Attainment ' + i + '</div>' +
    '<div class="req2 educ-wiz-col-1">' +
      '<div><label>Name of School*</label></div>' +
      '<div><label>Degree Course</label></div>' +
      '<div><label>Inclusive Date From</label></div>' +
    '</div>' + 
    '<div class="educ-wiz-col-2">' +
      '<div>' +
        '<input name="school[]" type="text" class="req2 wizard-input-school">' +
        '<label>Year Graduated*</label>' +
        '<input name="grad[]" type="text" class="req2 wizard-input-grad">' +
      '</div>' +
      '<div>' +
        '<input name="degree[]" type="text" class="req2 wizard-input-degree">' +
        '<label>Level*</label>' +
        '<select name="level[]" class="req2 wizard-input-level" name="level">' +
          '<option>Select Level</option>' +
          '<option>College</option>' +
          '<option>Post Graduate</option>' +
          '<option>Vocational</option>' +
        '</select>' +
      '</div>' +
      '<div>' +
        '<input name="astart[]" type="text" class="req2 wizard-input-start">' +
        '<label>Inclusive Date From</label>' +
        '<input name="afinish[]" type="text" class="req2 wizard-input-afinish">' +
      '</div>' +
    '</div>' +
    '<div class="content-line"></div>' );
} );
  
  
// This where I check the values of each if its empty.
$('.req2').keyup(function(){
  
  if (
  
    $(".wizard-input-school").val() != "" &&
    $(".wizard-input-degree").val() != "" &&
    $(".wizard-input-afinish").val() != "" &&
    $(".wizard-input-astart").val() != "" &&
    $(".wizard-input-level").val() != "none" &&
    $(".wizard-input-grad").val() != ""
    
  ) {
    
    $(".wiz-next2").removeAttr('disabled');
    $(".wiz-next2").css("opacity","1")
    
  } else if (
  
    $(".wizard-input-school").val() === "" ||
    $(".wizard-input-degree").val() === "" ||
    $(".wizard-input-afinish").val() === "" ||
    $(".wizard-input-astart").val() === "" ||
    $(".wizard-input-level").val() === "none" ||
    $(".wizard-input-grad").val() === ""
    
  ) {
    $('.wiz-next2').attr('disabled','disabled');
    $(".wiz-next2").css("opacity",".5")
  }
  
});
  
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wizard-content2">

  <div class="educ-title">Attainment 1</div>

  <div class="educ-wiz-col-1">
    <div>
      <label>Name of School*</label>
    </div>
    <div>
      <label>Degree Course</label>
    </div>
    <div>
      <label>Inclusive Date From</label>
    </div>
  </div>

  <div class="educ-wiz-col-2">
    <div>
      <input name="school[]" type="text" class="req2 wizard-input-school">
      <label>Year Graduated*</label>
      <input name="grad[]" type="text" class="req2 wizard-input-grad">

    </div>
    <div>
      <input name="degree[]" type="text" class="req2 wizard-input-degree">
      <label>Level*</label>
      <select name="level[]" class="req2 wizard-input-level" name="level">
        <option value="none">Select Level</option>
        <option value="College">College</option>
        <option value="Post Graduate">Post Graduate</option>
        <option value="Vocational">Vocational</option>
      </select>
    </div>

    <div>
      <input name="astart[]" type="text" class="req2 wizard-input-astart">
      <label>Inclusive Date From</label>
      <input name="afinish[]" type="text" class="req2 wizard-input-afinish">
    </div>

  </div>

  <div class="content-line"></div>
  <div class="educ-cont-add"></div>

谢谢!

0 个答案:

没有答案