jquery - 选中复选框时启用下拉菜单

Question

我想使用复选框启用和禁用下拉列表。每个复选框都有下拉列表。 每次我选中复选框时，下拉菜单都会启用，但问题是所有下拉菜单都已启用。

这是我的 HTML

  @foreach($allergies as $aller)
               <select name="tolerance[]" class="tol" id="tol" disabled>
                      <option value="Low">Low</option>
                      <option value="Medium">Medium</option>
                      <option value="High">High</option>
                </select>
                      <input type="checkbox" class="allergies" id="allergies" name="allergen[]" value="{{$aller->allergen_id}}">
                      {{ $aller->allergen_name}}<br>
              @endforeach

这是我的 JQUERY

<script>
    $(document).ready(function(){
    $('.tol').attr('disabled', 'disabled');
    });

    $(document).ready(function(){

      var $checkBox = $('.allergies'),
        $select = $('.tol');

    $checkBox.on('change',function(e){
        if ($(this).is(':checked')){
            $select.removeAttr('disabled');
        }else{
           $select.attr('disabled','disabled');
        }
    });

    });
</script>

Answer 1

$(document).ready(function() {
  $('.tol').attr('disabled', 'disabled');

  var $checkBox = $('.allergies');

  $checkBox.on('change', function(e) {
    //get the previous element to us, which is the select
    var $select = $(this).prev();
    
    if (this.checked) {
      $select.removeAttr('disabled');
    } else {
      $select.attr('disabled', 'disabled');
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="tolerance[]" class="tol" disabled>
                      <option value="Low">Low</option>
                      <option value="Medium">Medium</option>
                      <option value="High">High</option>
                </select>
<input type="checkbox" class="allergies" id="allergies" name="allergen[]" value="Pollen">Pollen<br>

<select name="tolerance[]" class="tol" disabled>
                      <option value="Low">Low</option>
                      <option value="Medium">Medium</option>
                      <option value="High">High</option>
                </select>
<input type="checkbox" class="allergies" id="allergies" name="allergen[]" value="Glue">Glue<br>