Невозможно вызвать конкретный коллапс с помощью радиокнопки с помощью jquery

Question

Добрый день, я использую лезвие laravel, чтобы динамически генерировать некоторые переключатели и формы в зависимости от выбора пользователя. Таким образом, пользователь выберет определенное количество заданий, а затем будут сформированы формы для количества заданий. Эти формы будут скрыты и будут открыты (только через загрузочный коллапс), только если установлен определенный переключатель. Однако, что происходит, когда я проверяю переключатель из одной группы переключателей, отображаются все формы. Кто-нибудь может мне помочь?

Я использую jquery, чтобы показать / скрыть коллапс в зависимости от того, какая радиокнопка отмечена. Я попытался назначить индивидуальные идентификаторы для кнопок динамически, используя свойства цикла. Все еще с ошибкой.

Файл с лезвием (РАДИО-КНОПКА)

    @foreach($interest as $job)
     @if($job != 0)
     <!-- EXPERIENCE RADIO BUTTON-->
      <label></label>
      <label>Experience for {{$jobs[$loop->index]}} </label>
      <div class="custom-control custom-radio">

          <input type="radio" class="custom-control-input" id="noxp{{$loop->iteration}}" name="jbxp{{$loop->iteration}}"  value="0">
          <label class="custom-control-label" for="noxp{{$loop->iteration}}">No Experience</label>
      </div>


      <div class="custom-control custom-radio">

          <input type="radio" class="custom-control-input" id="xp1{{$loop->iteration}}" name="jbxp{{$loop->iteration}}" value="1">
          <label class="custom-control-label" for="xp1{{$loop->iteration}}">1-11 Months</label>
      </div>

      <div class="custom-control custom-radio">

          <input type="radio" class="custom-control-input" id="xp2{{$loop->iteration}}" name="jbxp{{$loop->iteration}}" value="2">
          <label class="custom-control-label" for="xp2{{$loop->iteration}}">1-5 Years</label>
      </div> 

      <div class="custom-control custom-radio">

          <input type="radio" class="custom-control-input" id="xp3{{$loop->iteration}}" name="jbxp{{$loop->iteration}}" value="3">
          <label class="custom-control-label" for="xp3{{$loop->iteration}}">5+ Years</label>
      </div>

Блейд-файл (РАЗДЕЛ ФОРМЫ)

     <form id="ref-form-{{$loop->iteration}}" class="form-horizontal" action="{{url('/send-refs')}}" method="POST">
        @csrf
              <div class="row">
                <div class="collapse panel-collapse collapse" id="panel-{{$loop->iteration}}">
                  <div class="panel-body">
                    <!--REF-1-DETAILS-->
                    <div class="row">
                        <div class="col-md-6 mb-2">
                          <label>Last Place Work As {{$jobs[$loop->index]}}</label>
                          <input type="text" name="PlaceWorked" class="form-control" placeholder="Enter last place worked" value=" " required>

                        </div>
                      </div>
     </form>

JQuery используется, чтобы показать / скрыть коллапс:

       <script>
      $(".custom-control-input").click(function() {

      $("#ref-form-1 :input").attr("disabled", false);
      $("#ref-form-2 :input").attr("disabled", false);
      $("#ref-form-3 :input").attr("disabled", false);

      if ($("input[name=jbxp1]:checked").val() == "0") {
          $("#ref-form-1 :input").attr("disabled", true);
          $('#panel-1').collapse('hide');

      }

      if($("input[name=jbxp1]:checked").val() != "0") {
        $(' #panel-1').collapse('show');
      }


      if ($("input[name=jbxp2]:checked").val() == "0") {
          $("#ref-form-2 :input").attr("disabled", true);
          $('#panel-2').collapse('hide');
      }
      if($("input[name=jbxp2]:checked").val() != "0") {
        $('#panel-2').collapse('show');
      }

      if ($("input[name=jbxp3]:checked").val() == "0") {
          $("#ref-form-3 :input").attr("disabled", true);
          $(' #panel-3').collapse('hide');
      }
      if($("input[name=jbxp3]:checked").val() != "0") {
        $('#panel-3').collapse('show');
      }
  });
    </script>

Итак, я ожидаю, что если щелкнуть переключатель в первой группе, соответствующее действие будет отражено только в первой форме.

Answer 1

Вы можете использовать функцию hide с продолжительностью, если хотите. См. Документацию jQuery для всех возможных опций.

$('#panel-3').hide();