[1] there is such a requirement in the project, how to solve it. The default check box is all selected, or you can cancel a certain state. Select at least 4 options before you can click next. How to achieve this
html:
<li>
<input id="yl" type="checkbox" value="yl" v-model="isSelected" @click="nextBtn">
<label for="yl"></label>
</li>
<li>
<input id="mk" type="checkbox" value="mk" v-model="isSelected" @click="nextBtn">
<label for="mk"></label>
</li>
<li>
<input id="cp" type="checkbox" value="cp" v-model="isSelected" @click="nextBtn">
<label for="cp"></label>
</li>
<li>
<input id="zj" type="checkbox" value="zj" v-model="isSelected" @click="nextBtn">
<label for="zj"></label>
</li>
<li>
<input id="cc" type="checkbox" value="cc" v-model="isSelected" @click="nextBtn">
<label for="cc"></label>
</li>
<li>
<input id="wl" type="checkbox" value="wl" v-model="isSelected" @click="nextBtn">
<label for="wl"></label>
</li>
<li>
<input id="xs" checked type="checkbox" value="xs" v-model="isSelected" @click="nextBtn">
<label for="xs"></label>
</li>
<li class="choose-btn">
<button type="button" @click="$router.back(-1)"></button>
<button type="button" ></button>
</li>
</ul> js:
export default {
data () {
return {
checked: true,
isSave: false,
isSelected: []
}},
methods: {
// checkboxclickchecboxvaluemodel
// setTimeout
nextBtn: function () {
var self = this
setTimeout(function () {
console.log(self.isSelected)
}, 0)
}}
}
4
this is the