用户必须首先检查第n项,否则将启用n-1进行检查

时间:2016-08-20 15:04:23

标签: javascript jquery

我创建了复选框,选择全部。它工作得很好。现在我希望我能够检查"选择所有"但是不能选择项目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>
&#13;
&#13;
&#13;

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

1 个答案:

答案 0 :(得分:1)

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

public void add (View v){

    Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
    intent.setType("audio/*");
    startActivity(Intent.createChooser(intent, "Select music"));

}
$(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);
  });
});