禁用复选框，点击jquery中的另一个复选框

I am new in jquery can anyone help me out for this problem. I have 4 services in my webpage All services have one checkbox when user click any one service other three should be disable and this will be applied for others. Can anyone help me out Here is my Html Code with Foreach Loop.

<div class="one-row">
   <?php foreach ($services as $key => $allservices){ 
          if($key > 3) {  ?>
             <div class="div_img_part-2"> 
                 <span class="img_part_class-2"><img src="{{ asset('images/ServiceImages/'. $allservices['image'])}}"></span>
                     <span class="text_part_class-2">
                     <span class="check-box">
                         <input type="checkbox" name="services[]" value="<?php echo $allservices['id']; ?>" <?= $checked; ?> ><?php echo $allservices['name'];?>
                     </span>
                     </span>
             </div>
            <?php } }?>
       </div>

Thanks in advance :)

I agree with the others that it is best to use radio buttons for this one, but if you really insist in using checkboxes with the aid of jquery check this demo:

$('.check-box :checkbox').on('change', function(){
    $('.check-box :checkbox').prop('checked', false);
    $(this).prop('checked', true);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one-row">
             <div class="div_img_part-2"> 
                 <span class="img_part_class-2"><img src=""></span>
                     <span class="text_part_class-2">
                     <span class="check-box">
                         <input type="checkbox" name="services[]" value="123">sample 1
                     </span>
                     </span>
             </div>
             <div class="div_img_part-2"> 
                 <span class="img_part_class-2"><img src=""></span>
                     <span class="text_part_class-2">
                     <span class="check-box">
                         <input type="checkbox" name="services[]" value="123">sample 2
                     </span>
                     </span>
             </div>
             <div class="div_img_part-2"> 
                 <span class="img_part_class-2"><img src=""></span>
                     <span class="text_part_class-2">
                     <span class="check-box">
                         <input type="checkbox" name="services[]" value="123"> sample 3
                     </span>
                     </span>
             </div>
       </div>

or just use radio buttons with the aid of css to make them appear like checkboxes

see css's appearance property

</div>

If you wish to disable the other checkboxes from getting selected, please follow this code

<script type="text/javascript">
  $('.check-box :checkbox').on('change', function(){
  $('.check-box :checkbox').prop('disabled', true);
    $(this).prop('disabled', false);
})</script>