Select all inputs inside a class that is from an array

Question

In my code, for every child class, there's a checkbox used to display it, otherwise it's not displayed. When one of the checkbox (var inputs) is checked or unchecked, this function is called. The child class associated with the checkbox will be displayed. Now, I want all the inputs inside the child class to be required. I've looked a bit but could not find how to do it.

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 (this section is repeated in the form but with different inputs inside 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>

To be more clear, what I want is that when the checkbox is checked, the inputs of the childClass right next to it become required. I dont know how to properly select these inputs. Thank you

Can you please show us an example of the markup to help us visualize what you are working with? — Taplar, May 25 '20 at 18:45
Also provide a more detailed explanation of where you are running into problems regarding the code shown. Take a few minutes to read through how to create a [mcve] — charlietfl, May 25 '20 at 18:47
@Taplar Hope the edit helps. Tell me if you need more clarifications — Sacha, May 25 '20 at 19:38
`childClasses.find(':input').prop('required', true)`? You can read about [`prop`](https://api.jquery.com/prop/#prop-propertyName-value) on the jQuery site... — Heretic Monkey, May 25 '20 at 19:41
Does this answer your question? [jQuery add required to input fields](https://stackoverflow.com/questions/19166685/jquery-add-required-to-input-fields) — Heretic Monkey, May 25 '20 at 19:43
@HereticMonkey the thing is i only want the inputs of one of the childClasses to be required. As shown in my JS code, i want the inputs of childClasses[i] to be required. Edit: wait i read to fast ill try something — Sacha, May 25 '20 at 19:47
So use `childClasses[i]` instead of `childClasses`... it's just an example; I'm not doing your thinking for you :). — Heretic Monkey, May 25 '20 at 19:49
@HereticMonkey That's exactly what I tried, but somehow had to create an other Jquery Object `var childClass=$(childClasses[i])` and then `childClass.find(':input').prop('required', true)`. Thank you — Sacha, May 25 '20 at 19:56

score 0 · Answer 1 · answered May 25 '20 at 19:48

You can do it like this:

$(".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>

Select all inputs inside a class that is from an array

1 Answers1