如图,我要做到这个效果,竖着每行只能有一个最像,和最不像,点击左边禁用右边
<div v-else> <div v-if="progress<quiz.length" class="jumbotronjumbotron-fluid mt-3"> <div class="container" :name="quiz[progress].subjectId"> <h1 class="display-4"> <!--问题--> {{quiz[progress].subject}} </h1> 最像 最不像 <div v-for="(item,index) in quiz[progress].items" :key="index" class="form-check my-4 "> <label class="from-check-label"> <!--单选按钮绑定答题是谁,值为itemsValue--> <input type="radio" v-on:click="likenessflag(index,item.id)" class="form-check-input" name="likeness" value="item.id" title="最像" > <input type="radio" v-on:click="unlikeflag(index,item.id)" class="form-check-input" name="unlike" value="item.id" title="最不像" > <span class="badge badge-pill badge-primary mx-3"> {{itemsValue[index]}} </span> {{item.title}} </label> </div>
思路就是每次点击就解除对面所有数据,然后重新禁用就好了
likenessflag:function(index,v){ $('input[name="unlike"]').attr("disabled",false); $('input[name="unlike"]')[index].disabled=true; this.show=false; }, unlikeflag:function(index,v){ $('input[name="likeness"]').attr("disabled",false); $('input[name="likeness"]')[index].disabled=true; this.show=false; },