防止用戶使用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>

來源

2017-07-06 Muhammed Ikram

如何禁用未來的人，如果前一個被選中啓用？

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

來源

2017-07-06 22:55:22 num8er

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

來源

2017-07-06 23:07:23 Will

防止用戶使用javascript隨機選中複選框

回答

相關問題