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;
},
radio两行每行只能选择一个的解决方案!的更多相关文章
- menu 一组 只能选择一个
menu 一组 只能选择一个 将属性表的 groupindex 给一个值,假设你有三个Lang选项 就把这三个 manuitemex.groupindex 都设成同一个编号 (ex: 10) 以及把 ...
- 【JS】限制两个或多个单选框最多只能选择一个
$(function () { /*$("#checkbox1").click(function(){ if($(this).attr("checked") = ...
- Ext 编辑 comobox编辑源只能选择一个
storePrType.DataSource = optsvc.Select("28").Where(r => r.OptionID == cmbEngineeringPrT ...
- plupload 限制上传数量 只能选择一张图片上传
var files=[];var errors=[]; var chunk=<%=request.getParameter("chunk")%>; ...
- c# winform DataGridView单击选中一整行,只能单选,不能选择多行,只能选择一行
设置DataGridView的属性SelectionMode为FullRowSelect 这样就使DataGridView不是选择一个字段,而是选择一整行了 设置DataGridView的属性Mult ...
- 要做重试机制,就只能选择 DelayQueue ?其实 RabbitMQ 它上它也行!
原文链接:要做重试机制,就只能选择 DelayQueue ?其实 RabbitMQ 它上它也行! 一.场景 最近研发一个新功能,后台天气预警:后台启动一条线程,定时调用天气预警 API,查询现有城市的 ...
- 当没有用 EXISTS 引入子查询时,在选择列表中只能指定一个表达式。
当没有用 EXISTS 引入子查询时,在选择列表中只能指定一个表达式.比如 select * from T_Employee where FNumber not in ( select top 5* ...
- 选择一个 Python Web 框架:Django vs Flask vs Pyramid
Pyramid, Django, 和 Flask都是优秀的框架,为项目选择其中的哪一个都是伤脑筋的事.我们将会用三种框架实现相同功能的应用来更容易的对比三者.也可以直接跳到框架实战(Framework ...
- 【问题收集·知识储备】Xcode只能选择My Mac,不能选择模拟器如何解决?
网友问题:请问打开一个应用,只能选择My Mac,不能选择模拟器如何解决? 答案: 下面将问答过程记录如下: CHENYILONG Blog 请问打开一个应用,只能 ...
随机推荐
- 【原创】C语言和C++常见误区(一)
本文仅在博客园发布,认准原文地址:https://www.cnblogs.com/jisuanjizhishizatan/p/15414469.html 问题1:int类型占几个字节? 常见误区:占4 ...
- AIbee 笔试
CSS选择器 div+p 选择紧接在div元素之后的所有< p >元素 C++删除数组最后一个元素. 例如[1 2 3 4] 最后变为 [1 2 3] 用splice的删除,增加和替换 a ...
- 百度OCR技术博客
百度OCR工具链使用 百度OCR的API使用总体来说比较容易,主要步骤为:注册云平台并登录,选择服务并创建应用,保存API Key以及Secret Key,选择调用API. 注册登录百度云平台 首先需 ...
- spring security整合QQ登录
最近在了解第三方登录的内容,尝试对接了一下QQ登录,此次记录一下如何实现QQ登录的过程,在这个例子中是和spring secuirty整合的,不整合spring secuirty也是一样的. 需求: ...
- 【BZOJ-2199】奶牛议会
链接: BZOJ-2199 题意: 给出 \(n(1\leq n\leq 1000)\) 个点,\(m(1\leq m\leq 4000)\) 个形如:"点 \(a\) 取 \(ca\) 或 ...
- 面试官问:说说你对Java函数式编程的理解
常见的面试问题 总结一下,在Java程序员的面试中,经常会被问到类似这样的问题: Java中的函数式接口是什么意思? 注解 @FunctionalInterface 的作用是什么? 实现一个函数式接口 ...
- hdu 5094 Maze (BFS+状压)
题意: n*m的迷宫.多多要从(1,1)到达(n,m).每移动一步消耗1秒.有P种钥匙. 有K个门或墙.给出K个信息:x1,y1,x2,y2,gi 含义是(x1,y1)与(x2,y2)之间有gi ...
- go defer、return的执行顺序
一.一个函数中多个defer的执行顺序 defer 的作用就是把defer关键字之后的函数执行压入一个栈中延迟执行,多个defer的执行顺序是后进先出LIFO,也就是先执行最后一个defer,最后执行 ...
- Linux下的 sniff-andthen-spoof程序编写
Linux下的 sniff-andthen-spoof程序编写 一.任务描述 在本任务中,您将结合嗅探和欺骗技术来实现以下嗅探然后欺骗程序.你需要两台机器在同一个局域网.从机器A ping IP_X, ...
- float32 和 float64
float32 和 float64 Go语言中提供了两种精度的浮点数 float32 和 float64. float32,也即我们常说的单精度,存储占用4个字节,也即4*8=32位,其中1位用来符号 ...