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 请问打开一个应用,只能 ...
随机推荐
- 洛谷4234最小差值生成树 (LCT维护生成树)
这也是一道LCT维护生成树的题. 那么我们还是按照套路,先对边进行排序,然后顺次加入. 不过和别的题有所不同的是: 在本题中,我们需要保证LCT中正好有\(n-1\)条边的时候,才能更新\(ans\) ...
- 接口自动化-Python3+request上传文件,发送multipart/form-data编码
1.安装requests_toolbelt pip install requests-toolbelt 2.发送文件中的数据 from requests_toolbelt import Multi ...
- 从零到熟悉,带你掌握Python len() 函数的使用
摘要:本文为你带来如何找到长度内置数据类型的使用len() 使用len()与第三方数据类型 提供用于支持len()与用户定义的类. 本文分享自华为云社区<在 Python 中使用 len() 函 ...
- 264.丑数II
题目 给你一个整数 n ,请你找出并返回第 n 个 丑数 . 丑数 就是只包含质因数 2.3 和/或 5 的正整数. 示例 1: 输入:n = 10 输出:12 解释:[1, 2, 3, 4, 5, ...
- [软工顶级理解组] Beta阶段事后分析
目录 设想和目标 计划 资源 变更管理 设计/实现 测试/发布 团队的角色,管理,合作 总结 质量提高 会议截图 设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰 ...
- [no code][scrum meeting] Alpha 7
项目 内容 会议时间 2020-04-13 会议主题 OCR技术细节分析 会议时长 30min 参会人员 PM+OCR组成员 $( "#cnblogs_post_body" ).c ...
- boost编译中的细节问题
原文链接 http://www.cppblog.com/Robertxiao/archive/2013/01/06/197022.html 生成文件命名规则:boost中有许多库,有的库需要编译.而有 ...
- NorFlash、NandFlash在技术和应用上有些什么区别?
首先你要搞懂什么是Flash Memory? Flash Memory(快闪存储器),是一种电子式可清除程序化只读存储器的形式,允许在操作中被多次擦或写的存储器.这种科技主要用于一般性数据存储,以及在 ...
- 矩形覆盖 牛客网 剑指Offer
矩形覆盖 牛客网 剑指Offer 题目描述 我们可以用21的小矩形横着或者竖着去覆盖更大的矩形.请问用n个21的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? class Solution: ...
- 数字孪生 3D 科技馆的科学传播新模式
前言 科技馆是一种参与型体验型的博物馆,以传播科学知识.培养公众的科学创新技术为宗旨,并以其生动的展现方式得到公众的广泛欢迎.一直以来,我国科技馆的发展受到各种因素的制约和影响,发展缓慢.如今在我国经 ...