Abia Nasra Abia Nasra - 3 months ago 12
Javascript Question

user have to check n'th item first than n-1 will be enable for check

I have create checkbox with select all. It works very fine.now I want I will able to check "select all" but can not select item 1 or item 2 or item 3. I should select item 5 first than only item 4 will be enable to select 3, 2, 1 will remain disable, after select item 5 and item 4 than item 3 will be enable to select and item 2 and 1 remain disable to select.It will continue until 1.
How can i do that please some one help me.



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





here is my code: http://jsfiddle.net/Nasra/f4xrhq40/1/

Answer

You may use .index( selector ) in order to get the index of current selected checkbox.

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

  $('#select_all').on('change', function () {
    if (this.checked) {
      $('.cbox').each(function () {
        this.checked = true;
      });
    } else {
      $('.cbox').each(function () {
        this.checked = false;
      });
    }
  });

  $('.cbox').on('click', function () {
    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);
    }
  });
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<ul class="main">
    <li><input type="checkbox" id="select_all" onclick="cl(this)"/> Select all</li>
    <ul>
        <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>
    </ul>
</ul>