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

Answer 2

如果前一个被选中，如何禁用下一个并启用？

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