Question

我是jquery的新手，任何人都可以帮我解决这个问题。我的网页上有4项服务当用户点击任何一项服务时，所有服务都有一个复选框，其他三项应该被禁用，这将适用于其他服务。谁能帮我吗这是我的带有Foreach循环的Html代码。

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

提前致谢:)

Answer 1

我同意其他人的说法，最好使用单选按钮，但是如果你真的坚持使用jquery的复选框来检查这个演示：

＆＃13;

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

＆＃13;

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

＆＃13;

或者只是在css的帮助下使用单选按钮使它们看起来像复选框

请参阅css＆＃39; appearance属性

Answer 2

如果您希望禁用其他复选框，请点击此代码

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

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

2 个答案: