Пользователь должен сначала проверить n-й элемент, после чего n-1 будет включен для проверки

javascript jquery

28 просмотра

1 ответ

У меня есть создать флажок с выбором всех. Это работает очень хорошо. Теперь я хочу, чтобы я мог проверить «выбрать все», но не могу выбрать пункт 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/

Автор: Abia Nasra Источник Размещён: 08.11.2019 11:28

Ответы (1)


1 плюс

Решение

Вы можете использовать .index (селектор) , чтобы получить индекс текущего выбранного флажка.

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

Автор: gaetanoM Размещён: 20.08.2016 03:45
Вопросы из категории :
32x32