jQuery next input in DOM for different parent

I have a set of role inputs and max registration inputs for each individual role. I'm trying to find an elegant way of just selecting the next input in the DOM, no matter the parent. My end goal will be to set the max_registrations[] input to disabled only when its matching role input is 'checked', but I'm having trouble matching that element in jQuery.

Code:

        @foreach ($roles as $role)
            <div class="row">
                <div class="col">
                    <input type="checkbox" name="roles[]" value="{{ $role->id }}" 
                        onchange="console.log($(this).parent().siblings().first().children('input').attr('name'))"
                    > {{ $role->name }}
                </div>
                <div class="col input-group input-group mb-2">
                    <div class="input-group-prepend">
                        <span class="input-group-text">Max Registrations:</span>
                    </div>
                    <input type="number" name="max_registrations[]" value="" class="form-control" >
                </div>                    
            </div>             
        @endforeach

Explanation:
roles[] is a checkbox. max_registrations[] is a number input. I have several of each of these laid out in rows. When the first roles[] is checked, the first max_registrations[] should be disabled/enabled.
I'm using Laravel Blade as my templating language, Bootstrap as my frontend template, and would like to achieve this using inline jQuery.

I've tried:

next('input').......Only works with siblings

nextAll('input')....This seems that it should work, but I can't figure out how

closest('input')....Also not sure why this doesn't work.

For right now I'm opting for the parent..siblings..first..children('input') method, but it feels ugly.

Thanks for any input.

You can write your own jQuery function that selects the next DOM element.

Why your other suggestions don't work:

• closest() will select the first matching parent.
• next() will indeed select the next sibling.
• nextAll() will select all next siblings.

Works when target is part of the selector

This function will select the next element that matches the given selector for each object in the jQuery selection.

If you want it to work with any selector then check the second snippet.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

jQuery.fn.nextInDom = function(selector){
  //create an empty return object
  var $returnCollection = $([]);
  //loop over the elements in the jQuery object
  this.each(function(){
    //find elements that match the given selector and loop over those
    $targetCollection = selector ? $(selector) : $('*');
    $targetCollection.each((i, el) => {
      //when the target is found in the selector select the next element and add it to the return collection
      if(el === this) {
        if($targetCollection.length > i) {
          $returnCollection = $returnCollection.add($targetCollection.eq(i+1));
        }
      }
      //jQuery version of continue to exit the each loop for better performance
      return;
    });
  });
  return $returnCollection;
}

$('.target').nextInDom('input').css('background-color', 'yellow');

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input value="target1" class=target>
</div>
<div>
  <input value="should become yellow (next)">
</div>
<div>
  <input value="no change">
</div>
<div>
  <input value="no change">
</div>

<div>
  <input value="target2" class=target>
</div>
<div>
  <input value="should become yellow (next)">
</div>
<div>
  <input value="no change">
</div>
<div>
  <input value="no change">
</div>

<!-- end snippet -->

Works with any selector

The following should work even if the target is not part of the selector. However it might cause bad performance on big doms because it loops over all elements in the DOM. Use with caution!

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

jQuery.fn.nextInDom = function(selector){
  //create an empty return object
  var $returnCollection = $([]);
    //loop over the elements in the jQuery object
  this.each(function(){
    //get all elements in the dom and loop over them
    var $dom = $('*');
    $dom.each((i, el) => {
      var $elementsAfter;
      //when target is found filter the dom collection on only elements after current one
      if(el === this) {
        $elementsAfter = $dom.filter((j) => {
          return j > i;
        });
        //filter another time with the given selector if defined
        if(selector) {
          $returnCollection = $returnCollection.add($elementsAfter.filter(selector).first());
        }
        else {
          $returnCollection = $returnCollection.add($elementsAfter.first());
        }
      }
      //jQuery version of continue to exit the each loop for better performance
      return;
    });
  });
  return $returnCollection;
}

$('.target').nextInDom('div').css('background-color', 'yellow');

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input value="target1" class=target>
</div>
<div>
  <input value="div should become yellow (next)">
</div>
<div>
  <input value="no change">
</div>
<div>
  <input value="no change">
</div>

<div>
  <input value="target2" class=target>
</div>
<div>
  <input value="div should become yellow (next)">
</div>
<div>
  <input value="no change">
</div>
<div>
  <input value="no change">
</div>

<!-- end snippet -->