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

Question

我有以下测试复选框。用户可以按任何顺序选择任何复选框。 我的问题是如何使用 javascript/jquery 来防止用户随机选择复选框。 我希望用户单击第一个复选框，然后单击第二个复选框，依此类推。

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

Answer 1

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