radio两行每行只能选择一个的解决方案!

如图,我要做到这个效果,竖着每行只能有一个最像,和最不像,点击左边禁用右边
<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;
},
---------------------------------------------------------------------------
国之殇,未敢忘!
南京大屠杀!
731部队!
(有关书籍《恶魔的饱食》)以及核污染水排海等一系列全无人性的操作,购买他们的食品和为它们提供帮助只会更加变本加厉的害你,呼吁大家不要购买日本相关产品
昭昭前事,惕惕后人
吾辈当自强,方使国不受他人之侮!
---------------------------------------------------------------------------
作者:三号小玩家
出处:https://www.cnblogs.com/q1359720840/
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。 版权信息

浙公网安备 33010602011771号