Как сделать, чтобы происходил выбор только одного чекбокса?

Question

[Anton8989]

Добрый день, как сделать, чтобы при клике проставлялась галочка только на одном чекбоксе, c остальных галочки снимались бы. Заранее спасибо

<div id="app">
   
  <input type="checkbox" id="jack" value="Джек" v-model="checkedNames">
  <label for="jack">Джек</label>
  <input type="checkbox" id="john" value="Джон" v-model="checkedNames">
  <label for="john">Джон</label>
  <input type="checkbox" id="mike" value="Майк" v-model="checkedNames">
  <label for="mike">Майк</label>
  <br>
  <span>Отмеченные имена: {{ checkedNames }}</span>

</div>
        
   <script>
       new Vue({
  el: '#app',
  data: {
    checkedNames: []
  }
})
   </script>

Comments

[Алексей Ярков]

Почему не input type="radio"?

[Anton8989]

Алексей Ярков, Мне к сожалению нужен такой вариант

Answer 1

[0xD34F]

data: () => ({
  checked: null,
  items: [ 'hello, world!!', 'fuck the world', 'fuck everything' ],
}),

<label v-for="(n, i) in items">
  <input
    type="checkbox"
    :checked="checked === i"
    @change="checked = $event.target.checked ? i : null"
  >
  {{ n }}
</label>

Одно непонятно - а зачем чекбоксы-то, чем радиокнопки не угодили?

Comments

[Anton8989]

Благодарю))

[Anton8989]

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

[0xD34F]

Вместо события change обрабатывайте click: @click.prevent="checked = i".

[Anton8989]

0xD34F, Спасибо, а во втором варианте как это будет выглядеть? (https://codepen.io/anon/pen/LBvYMv?editors=1010)

[0xD34F]

Anton8989, подумайте.

[Anton8989]

0xD34F, Ок) спасибо