Как отметить и предыдущие чекбоксы?

Question

[HamSter]

Есть список из checkbox-ов:

<ul class="list-inline" id="app">
  <li class="list-inline-item">
    <div class="checkbox checkbox_num">
      <label class="checkbox-label">
        <input type="checkbox" class="checkbox-input" v-model="checked">
        <span class="checkbox-indicator" >1</span>
      </label>
    </div>
  </li>
  <li class="list-inline-item">
    <div class="checkbox checkbox_num">
      <label class="checkbox-label">
        <input type="checkbox" class="checkbox-input">
        <span class="checkbox-indicator">2</span>
      </label>
    </div>
  </li>
  <li class="list-inline-item">
    <div class="checkbox checkbox_num">
      <label class="checkbox-label">
        <input type="checkbox" class="checkbox-input">
        <span class="checkbox-indicator">3</span>
      </label>
    </div>
  </li>
  <li class="list-inline-item">
    <div class="checkbox checkbox_num">
      <label class="checkbox-label">
        <input type="checkbox" class="checkbox-input" checked>
        <span class="checkbox-indicator">4</span>
      </label>
    </div>
  </li>
  <li class="list-inline-item">
    <div class="checkbox checkbox_num">
      <label class="checkbox-label">
        <input type="checkbox" class="checkbox-input">
        <span class="checkbox-indicator">5</span>
      </label>
    </div>
  </li>
  </ul>

var app = new Vue({
        el: '#app',
        data: {
            checked: false
        }
});

jsbin

Есть ли возможность с помощью vue.js при выборе вторго чекбокса - отмечать выбранными первый и второй, при выборе третьего - 1-ый и 2-ой и т.д. (выбор всех предыдущих)?
Примеров не могу найти и реализовать не понятно с чего. Может кто подскажет.

Answer 1

[0xD34F]

Свойство checked сделать массивом, который будет содержать состояния чекбоксов. Сами чекбоксы на основе этого массива и создавать, через v-for. Слушать событие change, по которому выставлять состояния предыдущих чекбоксов (относительно того, на котором событие случилось) в true, следующих в false:

data: () => ({
  checked: [ 0, 0, 0, 0, 0 ],
}),
methods: {
  onChange(e, index) {
    const checked = e.target.checked;

    this.checked = [
      ...Array(index + checked).fill(1),
      ...Array(this.checked.length - index - checked).fill(0),
    ];
  },
},

<li v-for="(n, i) in checked">
  <label>
    <input
      type="checkbox"
      :checked="n"
      @change="onChange($event, i)"
    >
    {{ i + 1 }}
  </label>
</li>

UPD. Вынесено из комментариев:

а если несколько таких списков будет

Очевидно, нужен отдельный массив checked для каждого списка (если только вы не хотите, чтобы все списке выглядели одинаково). Что касается функции onChange, то надо будет добавить ей дополнительный параметр - чтобы была возможность указывать, с каким именно списком в данный момент идёт работа.

https://jsfiddle.net/9ba682w4/

Comments

[HamSter]

Здорово, но проблема в том, что после выбора, к примеру, 4-го (все предыдущие выбираются как и положено) выбираю второй (тоже к примеру) - должны быть выбраны только первый и второй (третий и 4-ый должны сбрасываться).

[0xD34F]

Тогда цикл должен выглядеть так:

for (var i = 0; i < this.checked.length; i++) {
  this.$set(this.checked, i, i <= index)
}

[HamSter]

0xD34F, а тут проблема ) в "двух кликах", снять флажок и только со второго раза выбор нужного количества.

[0xD34F]

Обновил ответ. Похоже на то, что вам надо?

[HamSter]

0xD34F, да, супер!!! Огромная благодарность!

[HamSter]

0xD34F, простите, а если несколько таких списков будет - jsbin.com/hirarox/edit?html,js,output , стоит продублировать функцию onChange под другим именем ... или список checked: [0,0,0,0,0] ?

[0xD34F]

Обновил ответ ещё раз.

[HamSter]

0xD34F, Спасибо!!

[HamSter]

0xD34F, а можно еще маленький вопрос?! Если 0 - это не активный, а 1- активный, как задать disabled? 0, 0, 1, 0, disabled

[0xD34F]

Не понял вопрос.

[HamSter]

0xD34F,
к примеру при выводе списка с чекбоксами, последний (5-ый) должен быть неактивен (disabled)

checked: 0, 0, 1, 0, ?

0 - input type="checkbox"
1 - input type="checkbox" checked

? - input type="checkbox" disabled - ?

[0xD34F]

А, в этом смысле.

:disabled="i === checked.length - 1"

[HamSter]

0xD34F, СПАСИБО!!!)