如何使 2 个复选框充当一组复选框中的单选按钮

Question

我想让两个复选框充当一组复选框中的单选按钮 正如我们在这里选择 Front 或 Pocket 时所做的那样，它只检查其中一个。

$(document).ready(function() {
  $.ajax({
    url: 'allPrintLocations',
    type: 'get',
    success: function(response) {

      $('.printLocation_name label').click(function(event) {

        var checkNow = $(this).parent('.printLocation_name').find('input')
        if (checkNow.attr('checked')) {
          for (var i = 0, l = response.length; i < l; i++) {
            if (checkNow.val() == response[i].id) {
              checkNow.removeAttr('checked', 'checked')
              document.getElementById("testview" + i).style.display = "none";
              document.getElementById("numSelect" + i).style.display = "none";
            }
          }
        } else {
          for (var i = 0, l = response.length; i < l; i++) {
            document.getElementById("discribee" + i).name = response[i].name + "Suggestion";
            document.getElementById("Numbere" + i).name = response[i].name + "Colors";
            if (checkNow.val() == response[i].id) {
              checkNow.attr('checked', 'checked')
              document.getElementById("testview" + i).style.display = "block";

              document.getElementById("numSelect" + i).style.display = "block";
              document.getElementById("label" + i).innerHTML = 'Describe what you would like designed on the ' + response[i].name + ' of the shirt.';
            }
          }
        }

      });
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Select_Boxes">
  <div class="all_print_location">
    <label class="main_labels">
                                    Select printed location
                                </label>
    <div class="allLocations">
      @foreach ($product[0]->print_locations as $PL)

      <div class="printLocation_name">
        <input name="printLocations[]" type="checkbox" id="front" value="{{$PL->id}}">

        <label for="front">{{$PL->name}}</label>
      </div>
      @endforeach
    </div>
  </div>
</div>
<div class="PageInfo">
  <p><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, recusandae.</em></p>
</div>
@for($i=0;$i
<count($printLocations);$i++) <div id="testview{{$i}}" class="DiscribePrint" style="display: none">
  <label id="label{{$i}}" for="discribe" class="main_labels">
                                What You want on your Front
                            </label>
  <div class="main__discribe">
    <textarea id="discribee{{$i}}" name="" cols="20" rows="5" class="form-control form_class" placeholder="1. Please add notes/changes you need a numbered list.&#10;2. Please try to keep your notes concise.&#10;3. Please make sure to write the exact text you want on the shirt (event     name, date, venue, letters, school, chapter, sponors,etc"></textarea>
  </div>
  </div>
  <div id="numSelect{{$i}}" class="number_Colors" style="display: none">
    <label for="Numbers" class="main_labels">
                                No. of colors
                            </label>
    <select id="Numbere{{$i}}" name="SelectColors" class="form-control form_class">
      <option value=""> Select Colors</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </div>

  @endfor

https://greekhouse.org/wizard/design

这是我的 HTML 代码 这是我的控制器功能

 public function designDetailScreen(Request $request)
    {
        $printLocations = PrintLocations::all();
        $designID = $request->cookie('designID');
        $design = Designs::where('id',$designID)->get();
        $productID = $request->cookie('productID');
        $product = Products::where('id',$productID)->get();
        // dd($product[0]->print_locations);
        $data = array(
            "design" =>$design,
            "product" =>$product,
            "printLocations" => $printLocations
        );
        return view('web.designDetailScreen')->with($data);
    }

Answer 1

使用 jQuery 的快速简单示例：

// select all checkboxes with class whatever, so the rest of the check-boxes are not affected 
$('.checkbox1').change(function(){
    // on changed diselect all without this, so you can have more than 2 check-boxes
    $('.checkbox1').not(this).prop('checked', false);
    console.log(this.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<span class="custom-checkbox"><input type="checkbox" class="checkbox1" id="checkbox1" name="options[]" value="1"><label for="checkbox1"></label></span><br />
<span class="custom-checkbox"><input type="checkbox" class="checkbox2" id="checkbox2" name="options[]" value="2"><label for="checkbox2"></label></span><br />
<span class="custom-checkbox"><input type="checkbox" class="checkbox1" id="checkbox3" name="options[]" value="3"><label for="checkbox3"></label></span><br />
<span class="custom-checkbox"><input type="checkbox" class="checkbox2" id="checkbox4" name="options[]" value="4"><label for="checkbox4"></label></span><br />