Question

美好的一天，我使用laravel刀片根据用户选择动态生成一些单选按钮和表格。因此，用户将选择一定数量的作业，然后将针对该作业数量生成表格。仅当选中某个单选按钮时，这些表单才会被隐藏并仅显示（通过Bootstrap折叠）。但是，发生的情况是，当我从一组单选按钮中选中一个单选按钮时，将显示所有表格。谁能帮助我？

我正在使用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 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();

无法使用jQuery单选按钮触发特定的折叠

1 个答案: