foreach loop, make the next input field required

Question

I made a function, which should check whether my input field, with type checkbox has been checked or not... but whenever I check my input field the input fields I wish to make required do not get the required attributes.

I basically tried everything from this topic: jQuery add required to input fields

and read this topic in hopes of finding something: .prop() vs .attr()

but unfortunately none of the topics has helped me much further. So either I made a mistake somewhere in my code, or the required attribute is a bit buggy.

I call the function via my input field (onclick event). I have already checked whether selectors were correct, and they are.

this is how my HTML looks like:

<div class="row" style="margin: auto;">
   <div class="custom-control custom-checkbox col-md-4">
       <input class="custom-control-input" onclick="is_required()" type="checkbox" id="fruittariër" value="fruittariër" name="vegetarisch[]">
        <label class="custom-control-label" for="fruittariër">&nbsp;fruittariër</label>
   </div>
<div class="col-md-4 input-group leftVeganPadding">
 <div class="input-group-prepend">
   <span class="input-group-text" id="basic-addon1">€</span>
      </div>
<input type="number" step="0.01" class="form-control" placeholder="Kosten" name="vegCosts[]">
 </div>
 <div class="input-group col-md-4 leftVeganPadding">
  <div class="input-group-prepend">
<span class="input-group-text" id="veganDatePicker"><i class="fas fa-calendar-alt"></i></span>
  </div>
<input type="text" class="form-control" name="veganEindDatum[]" id="shutDateFruittariër" placeholder="Sluit Datum" aria-label="veganDatePicker" aria-describedby="veganDatePicker">
     </div>
</div>

this is how I call my function:

<input class="custom-control-input" onclick="is_required()" type="checkbox"  value="vegan" name="vegetarisch[]">

function is_required() {
    //check whether the checkbox has been checked or not
    //if yes, make the other input fields inside the row required
        // variable odin = the row wrapped around the cols
    $('input[name="vegetarisch[]"]').each(function(index, thisElement) {
        if($(thisElement).is(':checked')) {
            let odin = $(thisElement).closest('.row');
            odin.find('input[name="vegCosts[]"]').attr('required', true);
            odin.find('input[name="veganEindDatum[]"]').attr('required', true);
        } else {
            odin = $(thisElement).closest('.row');
            odin.find('input[name="vegCosts[]"]').attr('required', false);
            odin.find('input[name="veganEindDatum[]"]').attr('required', false);
        }
    });
}

So what I wish to achieve: When the checkbox is checked I want to have the 2 other input fields inside the row to gain the attribute 'required'.

Please add ***all*** the relevant code (the other HTML fields and any CSS) so that we can replicate your issue. — Scott Marcus, Apr 18 '19 at 12:55
Your code seems to work fine: https://jsfiddle.net/o7ye5rhx/, but this is making assumptions about the HTML based on the JS methods you've used. Please add the HTML to the question, and check if there's any errors in the console. Also note that you should use unobtrusive event handlers instead of `on*` attributes in HTML — Rory McCrossan, Apr 18 '19 at 12:58
The variable `odin` should be declared in the `.each()` callback *outside* the `if`. As it is now, there are *two* `odin` variables: one in the `if` block, and a global one. — Pointy, Apr 18 '19 at 12:58
Since I already typed it, here's my fiddle featuring two rows and optimized code: https://jsfiddle.net/khrismuc/y62btawu/ — , Apr 18 '19 at 13:02

score 1 · Accepted Answer · answered Apr 26 '19 at 00:06

No need for an each you can pretty much do this in one line with an event handler.

Below, the closest .row is found for the button that was clicked. Then one selector is used to find both inputs that will be required. Then the required prop is set based on the status of the check button.

$(document).ready(function() {
  //Handle events on the checkbox
  $('input[name="vegetarisch[]"]').on('click', function() {
    //get the nearst row
    $(this).closest('.row')
      //Find the check boxes
      .find('input[name="vegCosts[]"],input[name="veganEindDatum[]"]')
      //set the required propery if the checkbox is checked
      .prop('required', $(this).is(":checked"));
  });

});

:required {
  border-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="row" style="margin: auto;">
  <div class="custom-control custom-checkbox col-md-4">
    <input class="custom-control-input" type="checkbox" id="fruittariër" value="fruittariër" name="vegetarisch[]">
    <label class="custom-control-label" for="fruittariër">&nbsp;fruittariër</label>
  </div>
  <div class="col-md-4 input-group leftVeganPadding">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon1">€</span>
    </div>
    <input type="number" step="0.01" class="form-control" placeholder="Kosten" name="vegCosts[]">
  </div>
  <div class="input-group col-md-4 leftVeganPadding">
    <div class="input-group-prepend">
      <span class="input-group-text" id="veganDatePicker"><i class="fas fa-calendar-alt"></i></span>
    </div>
    <input type="text" class="form-control" name="veganEindDatum[]" id="shutDateFruittariër" placeholder="Sluit Datum" aria-label="veganDatePicker" aria-describedby="veganDatePicker">
  </div>
</div>

Bedir · Answer 2 · 2019-04-18T13:12:05.283

You may want to try using the onchange event:

<input class="custom-control-input" id="myCheckbox" type="checkbox"  value="vegan" name="vegetarisch[]">

$('#myCheckbox').change(function () {
    is_required();
});

function is_required() {
    let odin = $(thisElement).closest('.row');
    $('input[name="vegetarisch[]"]').each(function (index, thisElement) {
        if ($(thisElement).is(':checked')) {
            odin.find('input[name="vegCosts[]"]').attr('required', true);
            odin.find('input[name="veganEindDatum[]"]').attr('required', true);
        } else {
            odin.find('input[name="vegCosts[]"]').attr('required', false);
            odin.find('input[name="veganEindDatum[]"]').attr('required', false);
        }
    });
}

foreach loop, make the next input field required

2 Answers2