无法使用 jquery 触发带有单选按钮的特定折叠

Question

美好的一天，我正在使用 laravel Blade 根据用户选择动态生成一些单选按钮和表单。因此，用户将选择一定数量的工作，然后将针对工作数量生成表格。这些表单将被隐藏，只有在选中某个单选按钮时才会显示（通过引导折叠）。但是，当我从一组单选按钮中检查一个单选按钮时，会显示所有表单。谁能帮帮我？

我正在使用 jquery 来显示/隐藏折叠，具体取决于选中的单选按钮。我尝试使用循环属性动态地将单个 ID 分配给按钮。仍然有错误。

刀片文件（单选按钮部分）

    @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 SECTION）

     <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();