防止用户使用javascript随机选中复选框

问题描述：

我有以下测试复选框。用户可以按任意顺序选择任何复选框。我的问题是我如何使用JavaScript/jQuery来防止用户随机选择复选框。我想用户点击第一个复选框，比第二个等。防止用户使用javascript随机选中复选框

1 <input type="checkbox" name="sports" value="1" /><br /> 

2 <input type="checkbox" name="sports" value="2" /><br /> 

3 <input type="checkbox" name="sports" value="3" /><br /> 

4 <input type="checkbox" name="sports" value="4" />

我需要帮助写脚本，只允许按顺序检查每个chckboxx - 从左到右。

许多在此先感谢

重新编辑问：

<div class="siblings"> 
    <ul> 
     <table class="table table-bordered"> 
     <?php 
     $count = 1; 

     for($x=0; $x < 5; $x++){ 
     ?> 
     <td> 
    <div class="thumb"> 
     <label for="image <?php echo $count;?>"><img class="img" 
    src="http://s5.tinypic.com/30v0ncn_th.jpg"/></label> 
    <input type="checkbox" class="chk " id="image <?php echo $count;?>" 
     name="tick" value="0" /> 
     </div> 
     </td> 

    <?php 
    $count++; 

    } 

     ?> 
    </table> 
    </ul> 
    </div> 
    </table>

答

如何禁用未来的人，如果前一个被选中启用？

$(function() { 
 

 
    var sportsSelector = 'input[type="checkbox"][name="sports"]'; 
 
    $(sportsSelector) 
 
    .on('click', function() { 
 
     var $this = $(this); 
 

 
     if($this.is(':checked')) { 
 
     $this 
 
      .nextAll(sportsSelector) 
 
      .first() 
 
      .removeAttr('disabled') 
 
      .removeAttr('checked'); 
 
     return; 
 
     } 
 

 
     $this 
 
     .nextAll(sportsSelector) 
 
     .attr('disabled', 'disabled') 
 
     .removeAttr('checked'); 
 
    }) 
 
    .attr('disabled', 'disabled') 
 
    .removeAttr('checked') 
 
    .first().removeAttr('disabled'); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
1 <input type="checkbox" name="sports" value="1" /><br /> 
 

 
2 <input type="checkbox" name="sports" value="2" /><br /> 
 

 
3 <input type="checkbox" name="sports" value="3" /><br /> 
 

 
4 <input type="checkbox" name="sports" value="4" />

num8er你的答案是伟大的工作。但是，我有另一种情况，复选框通过循环完成。如何应用类似的javaScript。我编辑了我原来的问题。谢谢@peter –

@MuhammedIkram你应该玩选择器。我刚刚给你解决你的问题。其他东西您可以根据需要进行修改。 – num8er

答

num8er比我快，但沿着相同的路线。

window.addEventListener('DOMContentLoaded',() => { 
 
    let checkboxes = document.querySelectorAll('[type="checkbox"]'); 
 

 
    for (let ix = 0; ix < checkboxes.length; ix++) { 
 
     checkboxes[ix].addEventListener('change', toggle); 
 
    } 
 

 
    function toggle() { 
 
     if (this.checked) { 
 
      let el = this.nextElementSibling; 
 
      while (el && el.tagName !== 'INPUT') { 
 
       el = el.nextElementSibling; 
 
      } 
 
      if(el) el.disabled = false; 
 
     } else { 
 
      let el = this.nextElementSibling; 
 
      while (el) { 
 
       if (el.tagName === 'INPUT') { 
 
        el.disabled = true; 
 
        el.checked = false; 
 
       } 
 
       el = el.nextElementSibling; 
 
      } 
 
     } 
 
    } 
 
});

<input type="checkbox" name="sports" value="1" /><br /> 
 
<input type="checkbox" name="sports" value="2" disabled /><br /> 
 
<input type="checkbox" name="sports" value="3" disabled /><br /> 
 
<input type="checkbox" name="sports" value="4" disabled />

防止用户使用javascript随机选中复选框

相关推荐