根据它是可见还是隐藏添加和删除必需的属性

Question

我看过这个 post 但是我没有使用 yes/no 检查。

当 class 称为“.required-item”不可见时，我想删除表单中的必需属性。与此相反；当 class 可见时，它需要被要求。

这是我到目前为止编写的代码，但是在兜圈子几个小时后我想我会把它带到这里看看是否有人可以提供帮助。

不确定这是否是相对的，但上面有 .required-item class 的表单字段是输入字段或电子邮件字段。如果我为此使用 class 是理想的，因为有很多这样的隐藏字段。

$(document).ready(function() {
    if ($('.required-item').is(':visible')) {
      $('.required-item').attr('required', 'required');
    } else {
      $('.required-item').removeAttr('required');
    }
});

这是JS Fiddle
提前谢谢你。

Answer 1

$(document).ready(function() {
    if ($('.required-item').is(':visible')) {
      $('.required-item').prop('required',true);

    } else {
      $('.required-item').prop('required',false);
    }
});

Answer 2

我相信这就是你想要的。

$('#Additional-Attendees').on('change', function() {
  var v = $(this).val() == "No" ? 0 : +$(this).val();

  var after = $(".additional-attendees:eq(" + v + ")").nextAll(".additional-attendees").addBack();
  var before = $(".additional-attendees:eq(" + v + ")").prevAll(".additional-attendees")
  $.each(before, function() {
    $(this).show();
    $('input[id*="First-Name"]',this).prop("required", true)
    $('input[id*="Last-Name"]',this).prop("required", true)
    $('input[id*="Email"]',this).prop("required", true)
  });
  $.each(after, function() {
    $(this).hide();
    $('input[id*="First-Name"]',this).prop("required", false).val("")
    $('input[id*="Last-Name"]',this).prop("required", false).val("")
    $('input[id*="Email"]',this).prop("required", false).val("")
    $('input[type="checkbox"]:checked',this).prop('checked', false).trigger('change');
  });
});

演示

如您所见，我稍微缩短了代码，因此更加动态。

$('.required-item').prop('required', function() {
  return $(this).is(':visible');
});
$('#Additional-Attendees').on('change', function() {
  var v = $(this).val() == "No" ? 0 : +$(this).val();

  var after = $(".additional-attendees:eq(" + v + ")").nextAll(".additional-attendees").addBack();
  var before = $(".additional-attendees:eq(" + v + ")").prevAll(".additional-attendees")
  $.each(before, function() {
    $(this).show();
    $('input[id*="First-Name"]',this).prop("required", true)
    $('input[id*="Last-Name"]',this).prop("required", true)
    $('input[id*="Email"]',this).prop("required", true)
  });
  $.each(after, function() {
    $(this).hide();
    $('input[id*="First-Name"]',this).prop("required", false).val("")
    $('input[id*="Last-Name"]',this).prop("required", false).val("")
    $('input[id*="Email"]',this).prop("required", false).val("")
    $('input[type="checkbox"]:checked',this).prop('checked', false).trigger('change');
  });
});

.additional-attendees {
  padding-top: 20px;
}

.button {
  margin-top: 20px;
  margin-bottom: 20px;
}

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

<body>

  <h2>Form</h2>

  <form redirect="/retreat/registration-confirmation">

    <input type="text" name="First-Name" placeholder="First Name*" id="First-Name" required="">
    <input type="text" name="Last-Name" placeholder="Last Name*" id="Last-Name" required="">
    <input type="email" name="Email" data-name="Email" placeholder="Email*" id="Email" required="">
    <div style="margin-top:20px;">
      Additional Attendees?
      <div>
        <select id="Additional-Attendees" name="Additional-Attendees" required="">
          <option value="No">No</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </div>
      <div class="additional-attendees a1" style="display: none;">
        <div>Attendee 1 Info:</div>
        <input type="text" name="A1-First-Name" placeholder="First Name*" id="A1-First-Name" required="" class="required-item">
        <input type="text" name="A1-Last-Name" placeholder="Last Name*" id="A1-Last-Name" required="" class="required-item">
        <input type="email" name="A1-Email" data-name="Email" placeholder="Email*" id="A1-Email" required="" class="required-item">
        <label><input type="checkbox" name="A1-Vegetarian" id="A1-Vegetarian" data-name="A1 Vegetarian" class="check"><span class="check-label" for="A1-Vegetarian">Vegetarian</span></label>
      </div>

      <div class="additional-attendees a2" style="display: none;">
        <div>Attendee 2 Info:</div>
        <input type="text" name="A2-First-Name" placeholder="First Name*" id="A2-First-Name" required="" class="required-item">
        <input type="text" name="A2-Last-Name" placeholder="Last Name*" id="A2-Last-Name" required="" class="required-item">
        <input type="email" name="A2-Email" data-name="Email" placeholder="Email*" id="A2-Email" required="" class="required-item">
        <label><input type="checkbox" name="A2-Vegetarian" id="A2-Vegetarian" data-name="A2 Vegetarian" class="check"><span class="check-label" for="A2-Vegetarian">Vegetarian</span></label>
      </div>

      <div class="additional-attendees a3" style="display: none;">
        <div>Attendee 3 Info:</div>
        <input type="text" name="A3-First-Name" placeholder="First Name*" id="A3-First-Name" required="" class="required-item">
        <input type="text" name="A3-Last-Name" placeholder="Last Name*" id="A3-Last-Name" required="" class="required-item">
        <input type="email" name="A3-Email" data-name="Email" placeholder="Email*" id="A3-Email" required="" class="required-item">
        <label><input type="checkbox" name="A3-Vegetarian" id="A3-Vegetarian" data-name="A3 Vegetarian" class="check"><span class="check-label" for="A3-Vegetarian">Vegetarian</span></label>
      </div>

      <div class="additional-attendees a4" style="display: none;">
        <div>Attendee 4 Info:</div>
        <input type="text" name="A4-First-Name" placeholder="First Name*" id="A4-First-Name" required="" class="required-item">
        <input type="text" name="A4-Last-Name" placeholder="Last Name*" id="A4-Last-Name" required="" class="required-item">
        <input type="email" name="A4-Email" data-name="Email" placeholder="Email*" id="A4-Email" required="" class="required-item">
        <label><input type="checkbox" name="A4-Vegetarian" id="A4-Vegetarian" data-name="A4 Vegetarian" class="check"><span class="check-label" for="A4-Vegetarian">Vegetarian</span></label>
      </div>

      <div class="additional-attendees a5" style="display: none;">
        <div>Attendee 5 Info:</div>
        <input type="text" name="A5-First-Name" placeholder="First Name*" id="A5-First-Name" required="" class="required-item">
        <input type="text" name="A5-Last-Name" placeholder="Last Name*" id="A5-Last-Name" required="" class="required-item">
        <input type="email" name="A5-Email" data-name="Email" placeholder="Email*" id="A5-Email" required="" class="required-item">
        <label><input type="checkbox" name="A5-Vegetarian" id="A5-Vegetarian" data-name="A5 Vegetarian" class="check"><span class="check-label" for="A5-Vegetarian">Vegetarian</span></label>
      </div>
      <div>
        <input type="submit" value="Submit" class="button">
      </div>
    </div>

  </form>
</body>

</html>

根据它是可见还是隐藏添加和删除必需的属性

Add and remove required attribute based on whether it is visible or hidden

jquery

attributes

show-hide