调查问卷 , vue多选限制个数
先看效果图。
部分HTML代码，核心代码
<li v-for="(item, index) in list" :key="item.questionNum">
<p>{{item.questionNum}}.{{item.title}} <span v-show="item.questionNum==1 || item.questionNum==2 || item.questionNum==3 || item.questionNum==4 || item.questionNum==5 || item.questionNum==7">(可选三项)</span><span v-if="item.questionNum==10">(选填)</span> </p>
<div class="item-box" :class="index == isRedBor ? 'item-box-red':''">
<label v-for="(subitem, subindex) in item.optionVOList" :key="subitem.optionNum">
<div class="item-ipt">
<input type="radio" v-if="item.optionType==0"
:value="subitem.optionNum"
v-model="item.selected"
:name="item.questionNum"
@change="changeCheck($event,item.questionNum,item.selected,item.optionValue, subindex)"
/>
<input type="checkbox" v-else-if="item.optionType==1"
:value="subitem.optionNum"
v-model="item.selected"
:name="item.questionNum"
@change="changeCheck($event,item.questionNum,item.selected,item.optionValue, subindex)"/>
<span>{{subitem.optionTitle}}</span>
</div>
<input class="item-txt" :readonly="checkRead ? false : 'readonly'" v-if="subitem.isOther==1" type="text" v-model="item.optionValue" @input="iptFun(item.questionNum,item.selected,item.optionValue, subindex)"/>
</label>
<textarea maxlength="140" v-if="item.optionType==2" @input="textFun($event,item.questionNum)" placeholder="如客户想要什么、我们可以做什么，怎样给客户提供更好的一站式全流程服务，140字以内">
</textarea>
</div>
</li>JS：
changeCheck(e, name, id, value) {
const _this = this;
var cks = document.getElementsByName(name);
//readonly
if (cks[cks.length - 1].checked) {
_this.checkRead = true;
}
// console.log(this.$refs.name)
function check() {
var checkedNum = 0;
for (var i = 0, len = cks.length; i < len; i++) {
if (cks[i].checked) checkedNum++;
if (checkedNum > 3) {
return false;
}
}
return true;
}
for (var i = 0, len = cks.length; i < len; i++) {
cks[i].onclick = function() {
if (!check()) {
_this.toast("最多选择3个");
this.checked = false;
}
}
}
let obj = {
"questionNum": name,
"optionNums": id,
"other": value || ''
}
let checkChose = e.target.checked;
if (checkChose) {
switch (name) {
case 0:
_this.deelFun(name, value, id);
break;
case 1:
_this.deelFun(name, value, id);
break;
case 2:
_this.deelFun(name, value, id);
break;
case 3:
_this.deelFun(name, value, id);
break;
case 4:
_this.deelFun(name, value, id);
break;
case 5:
_this.deelFun(name, value, id);
break;
case 6:
_this.deelFun(name, value, id);
break;
case 7:
_this.deelFun(name, value, id);
break;
case 8:
_this.deelFun(name, value, id);
break;
case 9:
_this.deelFun(name, value, id);
break;
case 10:
_this.deelFun(name, value, id);
break;
default:
_this.deelFun(name, value, id);
}
}
},
iptFun(name, id, value, idx) {
this.deelFun(name, value, id);
},
textFun(e, name) {
this.deelFun(name, e.target.value);
},
deelFun(name, value, id) {
if (typeof id == 'number') {
id = [id]
}
if (name !== 10) {
this.subArr[name - 1] = {
"questionNum": name,
"optionNums": id,
"other": value || ""
}
} else {
this.subArr[name - 1] = {
"questionNum": name,
"other": value || ""
}
}
// console.log(this.subArr)
},
getQuestionList() {
const _this = this;
return _this.$http.post('/eiq/question/list').then((res) => {
if (res.data.code == 200 && res.data.data) {
_this.isEiq = 'right';
let data = res.data.data;
_this.list = data || [];
_this.list.map((e, i) => {
e.selected = [];
e.optionVOList ? e.optionVOList.map((sube, subi) => {
if (sube.isOther == 1) {
sube.optionValue = '';
}
}) : null
})
// console.log(_this.list)
return res.data.code;
} else if (res.data.code == 169) {
_this.isEiq = 'servererror';
return res.data.code;
}
})
},
submitData() {
const _this = this;
let params = {
'token': _this.token,
'questionSubmitDTOS': _this.subArr
}
// console.log(_this.subArr)
var sum = 0;
_this.subArr.length > 0 ? _this.subArr.map((e, i) => {
sum += e.questionNum
}) : null;
for (let i = 0, len = 9; i < len; i++) {
if (!_this.subArr[i]) {
_this.isRedBor = i;
_this.toast("您还有题未答完");
break;
}
}
if (sum == 45 || sum == 55) {
return _this.$http.post('/eiq/question/submit', params).then((res) => {
// console.log(res)
_this.isRedBor = -1;
if (res.data.code == 200) {
_this.isSubmit = true;
}
})
}
},样式：
<style lang="scss" scoped>
@function px2rem($px) {
$rem: 75px;
@return ($px/$rem)+rem;
}
.container {
height: 100%;
.full-header {
background: #CCCCCC;
position: relative;
height: 44px;
line-height: 44px;
text-align: center;
background-color: transparent;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 5;
width: 100%;
h1 {
margin-left: 15%;
width: 70%;
font-size: px2rem(32px);
font-weight: 700;
color: #000;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.back-btn {
width: px2rem(20px);
height: px2rem(36px);
position: absolute;
top: 0;
left: 0;
padding: px2rem(24px) px2rem(30px);
}
}
.iphoneX {
padding-bottom: constant(safe-area-inset-bottom);
}
.canEiq {
.top-img {
width: 100%;
height: auto;
}
ul {
padding: px2rem(10px) px2rem(30px);
li p {
padding: px2rem(40px) px2rem(0px);
font-size: px2rem(32px);
color: #333333;
font-weight: bold;
}
li p span {
color: #999999;
}
.item-box {
border: 1px solid #D0D0D0;
border-radius: px2rem(8px);
label {
font-size: px2rem(30px);
display: block;
padding: px2rem(30px);
border-bottom: 1px solid #D0D0D0;
.item-ipt {
display: flex;
align-items: center;
input {
margin: px2rem(3px);
}
span {
line-height: px2rem(30px);
}
}
.item-txt {
box-sizing: border-box;
width: 100%;
border-radius: px2rem(8px);
padding: px2rem(10px) px2rem(10px);
margin-top: px2rem(20px);
border: 1px solid #dddddd;
}
}
label:last-of-type {
border: none;
}
textarea {
box-sizing: border-box;
width: 100%;
font-size: px2rem(30px);
line-height: px2rem(30px);
height: px2rem(220px);
padding: px2rem(20px);
border: none;
resize: none;
}
}
.item-box-red {
border: 1px solid #DD2534;
}
}
.bottom-list {
padding: px2rem(30px);
padding-bottom: px2rem(60px);
background: #fff;
width: 100%;
box-sizing: border-box;
button {
width: 100%;
background: #239BFC;
border-radius: px2rem(8px);
text-align: center;
font-size: px2rem(30px);
color: #FFFFFF;
padding: px2rem(24px) 0;
border: none;
}
}
}
.toast {
position: fixed;
z-index: 8;
top: 30%;
left: 30%;
width: 40%;
height: px2rem(90px);
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.5);
border-radius: px2rem(8px);
span {
color: #fff;
font-size: px2rem(30px);
}
}
.notEiq {
width: 100%;
height: calc(100vh - 44px);
background: #FAFAFA;
text-align: center;
padding-top: 40%;
box-sizing: border-box;
}
.notEiq p {
color: #999999;
font-size: px2rem(36px);
padding-top: px2rem(50px);
}
.loadEiq img {
width: 10%;
height: auto;
}
.finishEiq img {
width: 50%;
height: auto;
}
.cover {
width: 100%;
height: calc(100vh);
background: rgba(0, 0, 0, 0.50);
position: fixed;
z-index: 9;
top: 0;
}
.isSubmitBox,
.isBackBox {
z-index: 10;
width: px2rem(600px);
position: fixed;
top: 20%;
left: px2rem(75px);
}
.isBackBox-inner,
.isSubmitBox-inner {
height: px2rem(580px);
width: px2rem(600px);
background: #FFFFFF;
border-radius: px2rem(16px);
box-sizing: border-box;
padding: px2rem(40px);
text-align: center;
}
.isSubmitBox-inner img,
.isBackBox-inner img {
width: px2rem(300px);
height: auto;
margin-bottom: px2rem(30px);
}
.isSubmitBox-inner p,
.isBackBox-inner p {
padding: px2rem(5px) px2rem(30px);
line-height: px2rem(50px);
font-size: px2rem(36px);
color: #333333;
box-sizing: border-box;
}
.isSubmitBox-inner div,
.isBackBox-inner div {
box-sizing: border-box;
padding: px2rem(10px) px2rem(10px);
line-height: px2rem(40px);
font-size: px2rem(28px);
color: #999999;
}
.isSubmitBox-inner button,
.isBackBox-inner button {
margin-top: px2rem(40px);
box-sizing: border-box;
padding: px2rem(5px) px2rem(10px);
line-height: px2rem(40px);
font-size: px2rem(26px);
color: #F4F5FC;
width: px2rem(295px);
height: px2rem(70px);
background: #239BFC;
border-radius: px2rem(100px);
border: none;
}
.isSubmitBox .close,
.isBackBox .close {
margin-top: px2rem(60px);
width: px2rem(600px);
text-align: center;
img {
width: px2rem(70px);
height: px2rem(70px);
}
}
}
</style>