javascript - 用户必须先检查第 n 个项目，然后才能启用 n-1 个项目进行检查

Question

我创建了带有全选的复选框。它工作得很好。现在我希望我能够选中“全选”但不能选择项目 1 或项目 2 或项目 3。我应该先选择项目 5 而不是只有项目 4 才能选择 3、2、1将保持禁用状态，在选择第 5 项和第 4 项之后，第 3 项将被启用以进行选择，而第 2 项和第 1 项将保持禁用状态以进行选择。它将一直持续到 1。我该怎么做，请有人帮助我。

$(document).ready(function(){
    $('#select_all').on('click',function(){
        if(this.checked){
            $('.cbox').each(function(){
                 this.checked = true;
             });
         }else{
              $('.cbox').each(function(){
                this.checked = false;
             });
        }
    });
    
    $('.cbox').on('click',function(){
        if($('.cbox:checked').length == $('.cbox').length){
            $('#select_all').prop('checked',true);
        }else{
            $('#select_all').prop('checked',false);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main">
    <li><input type="checkbox" id="select_all" onclick="cl(this)"  /> Select all</li>
        <li><input type="checkbox" class="cbox" value="1"/>Item 1</li>
        <li><input type="checkbox" class="cbox" value="2"/>Item 2</li>
        <li><input type="checkbox" class="cbox" value="3"/>Item 3</li>
        <li><input type="checkbox" class="cbox" value="4"/>Item 4</li>
        <li><input type="checkbox" class="cbox" value="5"/>Item 5</li>
      Total Amount : <input id="Totalcost" > </input>

这是我的代码:http://jsfiddle.net/Nasra/f4xrhq40/1/

Answer 1

您可以使用 .index( selector )以获取当前选中复选框的索引。

$(document).ready(function () {
  $('.cbox:not(:last)').prop('disabled', true);

  $('#select_all').on('change', function (e) {
    var isChecked = this.checked;
    $('.cbox').get().reverse().forEach(function(ele, index) {
      ele.checked = isChecked;
      $(ele).trigger('change');
    });
  });

  $('.cbox').on('change', function (e) {
    if (this.checked) {
      var sIndex = (+$(this).index('.cbox') - 2);
      var selCriteria = (sIndex < 0) ? '.cbox' : '.cbox:gt(' + sIndex + ')';
      $(selCriteria).prop('disabled', false);
    } else {
      var sIndex = +$(this).index('.cbox');
      var selCriteria = '.cbox:lt(' + sIndex + ')';
      $(selCriteria).prop({'disabled': true, 'checked': false});
      $('.cbox:last').prop('disabled', false);
    }
    if ($('.cbox:checked').length == $('.cbox').length){
      $('#select_all').prop('checked',true);
    } else{
      $('#select_all').prop('checked',false);
    }
    var tot = 0;
    $('.cbox:checked').get().forEach(function(ele, index) {
      tot += parseFloat(ele.value);
    });
    $('#Totalcost').val(tot);
  });
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<ul class="main">
    <li><input type="checkbox" id="select_all" /> Select all</li>
    <ul>
        <li><input name="inv_ammount" type="checkbox" class="cbox" value="1"/>Item 1</li>
        <li><input name="inv_ammount" type="checkbox" class="cbox" value="2"/>Item 2</li>
        <li><input name="inv_ammount" type="checkbox" class="cbox" value="3"/>Item 3</li>
        <li><input name="inv_ammount" type="checkbox" class="cbox" value="4"/>Item 4</li>
        <li><input name="inv_ammount" type="checkbox" class="cbox" value="5"/>Item 5</li>
        Total Amount : <input id="Totalcost" />
    </ul>
</ul>