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;


            },

  

posted @ 2019-06-28 09:16  三号小玩家  阅读(553)  评论(0编辑  收藏  举报
Title
三号小玩家的 Mail: 17612457115@163.com, 联系QQ: 1359720840 微信: QQ1359720840