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

Question

I want to make two checkboxes to act as radio buttons in a group of checkboxes As it is done here when we slect Front or Pocket it only checks one from them.

 $(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

Here's My HTML Code And Here is My Controller Function

 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

Fast and easy example of what you want, using 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 />