zoukankan      html  css  js  c++  java
  • 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;
    
    
                },
    

      

  • 相关阅读:
    Java第三季
    LeetCode(10)Regular Expression Matching
    LeetCode(9)Palindrome Number
    shell基础编程
    LeetCode(8)String to Integer (atoi)
    使用python绘制词云
    我的书单
    LeetCode(7)Reverse Integer
    获取新浪微博的Access_token
    c语言中,常见数据类型的字节数
  • 原文地址:https://www.cnblogs.com/q1359720840/p/11100872.html
Copyright © 2011-2022 走看看