Выберите все входные данные внутри класса, который является массивом - PullRequest
Новая
       66

Выберите все входные данные внутри класса, который является массивом

0 голосов
/ 25 мая 2020

В моем коде для каждого дочернего класса используется флажок для его отображения, иначе он не отображается. Когда один из флажков (входы переменных) установлен или снят, вызывается эта функция. Будет отображен дочерний класс, связанный с флажком. Теперь я хочу, чтобы все входные данные внутри дочернего класса были обязательными. Я немного посмотрел, но не нашел, как это сделать.

JS: 

$(".displayChildBtn").change(function(){
    var inputs = $("form .displayChildBtn");
    var childClasses = $("form .childClass");
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].checked == true) {
            childClasses[i].style.display = "block";
            //need to have all inputs inside childClasses[i] required
        }
        else {
            childClasses[i].style.display = "none";
        }
    }
})

HTML (этот раздел повторяется в форме, но с разными входами внутри the childClass): 

<input type="checkbox" class="displayChildBtn" name="AddSomeone"/>//when checked, shows the childClass and should place the inputs required.
<label for="AddSomeOne">Add Someone</label>
<div class="chilClass">
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname">
</div>

Чтобы быть более ясным, я хочу, чтобы при установленном флажке входы дочернего класса рядом с ним становились обязательными. Я не знаю, как правильно выбирать эти входы. Спасибо

1 Ответ

0 голосов
/ 25 мая 2020

Сделать это можно так: 

$(".displayChildBtn").on("click", function() {
  if ($(this).is(":checked")) {
    $(this).nextAll(".childClass:first").show();
    let inputs = $(this).nextAll(".childClass:first").find("input");
    inputs.each(function() {
      $(this).prop("required", true);
    });
  } else {
    $(this).nextAll(".childClass:first").hide();
    let inputs = $(this).nextAll(".childClass:first").find("input");
    inputs.each(function() {
      $(this).removeAttr("required");
    });
  }
});
.childClass {
   display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="displayChildBtn" name="AddSomeone" />//when checked, shows the childClass and should place the inputs required.
<label for="AddSomeOne">Add Someone</label>
<div class="childClass">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</div>
...