uni-app的radio-group组件禁用时会选中所有的radio

uni-app的radio-group组件禁用时会选中所有的radio

产品分类 PC开发环境操作系统 PC开发环境操作系统版本号 HBuilderX类型 HBuilderX版本号 浏览器平台 浏览器版本 项目创建方式
uniapp/H5 Windows 22631.4751 正式 3.7.9 Chrome 132.0.6834.196 HBuilderX

示例代码：

示例代码：

<template>  
    <view>  
        <uni-forms :model-value="content" :label-width="110" :label-align="'right'">  
            <uni-forms-item label="申请人意见" name="applyOpinion" required class="item-radio-group">  
                <radio-group @change="radioChange" >  
                    <label v-for="(item, index) in applyOpinions" :key="item.value">  
                        <view>  
                            <radio :value="item.value" :checked="index === applyOpinionIndex" :disabled="nodeDisabled"/>  
                            <view class="radio-option-text">  
                                {{item.name}}  
                            </view>  
                        </view>  
                    </label>  
                </radio-group>  
            </uni-forms-item>  
        </uni-forms>  
    </view>  
</template>

<script>  
export default {  
    name: "consultation-outside-application-first-node",  
    props: ['processForm', 'nodeDisabled'],  
    data() {  
        return {  
            content: {},  
            applyOpinions: [  
                {  
                    value: '无法安排会诊',  
                    name: '无法安排会诊',  
                    checked: 'true'  
                },  
                {  
                    value: '外出会诊期间的医疗风险和个人人身安全由邀请医院和本人负责，同意前往。',  
                    name: '外出会诊期间的医疗风险和个人人身安全由邀请医院和本人负责，同意前往。'  
                }  
            ],  
            applyOpinionIndex: 0  
        };  
    },  
    mounted() {  
        this.content = this.processForm.formData.content  
        for(let i = 0; i < this.applyOpinions.length; i++) {  
            if (this.applyOpinions[i].value === this.content.applyOpinion) {  
                this.applyOpinionIndex = i;  
                break;  
            }  
        }  
    },  
    methods: {  
        radioChange: function(evt) {  
            for (let i = 0; i < this.applyOpinions.length; i++) {  
                if (this.applyOpinions[i].value === evt.detail.value) {  
                    this.applyOpinionIndex = i;  
                    break;  
                }  
            }  
        }  
    }  
}  
</script>

<style scoped lang="scss">  
.item-radio-group {  
    display: flex;  
    flex-direction: row;  
    align-items: center;  
}  
.radio-option-text {  
    display: inline;  
    padding-left: 10px;  
}  
</style>


### 操作步骤：


#### 操作步骤：
使用chrome浏览器模拟app端仿真设备，仿真设备iPhone 12 Pro

预期结果：

预期结果：

禁用按钮组，但不会全选


### 实际结果：


#### 实际结果：
禁用按钮组的同时全选

bug描述：

bug描述：

uniapp的radio-group组件禁用时会选中所有的radio（非禁用状态显示正常，禁用状态出现异常）


更多关于uni-app的radio-group组件禁用时会选中所有的radio的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

你循环出来的radio，然后disabled是传进来的值？ 那如果nodeDisabled是禁用的，肯定是全都禁用了啊 因为你每个radio的disabled都是禁用状态啊

更多关于uni-app的radio-group组件禁用时会选中所有的radio的实战教程也可以访问 https://www.itying.com/category-93-b0.html


禁用不等于全选，这两者并不等价。实际只要设置禁用，无论选中哪个，都会变成全部被选中的状态。不知道这样是否表达够清楚了呢？

回复 k***@163.com: 你把checked去掉看看，我刚试了下，没发现问题

回复 套马杆的套子: 一样的，和applyOpinions的’checked:true’没有关系，你自己试试就知道了，那个checked只是表示默认选中的选项

未复现，麻烦提供一个完整demo

这个问题是由于在禁用状态下radio组件的checked属性处理不当导致的。以下是关键分析：

  1. 问题根源在于radio的checked属性绑定方式。当前代码使用:checked="index === applyOpinionIndex"来判断选中状态，但在禁用状态下这个逻辑可能失效。

  2. 解决方案建议修改radio的checked绑定方式，改为直接比较value值：

<radio 
    :value="item.value" 
    :checked="item.value === content.applyOpinion" 
    :disabled="nodeDisabled"
/>

  1. 同时需要确保content.applyOpinion在初始化时有正确的默认值。

  2. 对于禁用状态下的样式问题，可以添加CSS控制：

radio[disabled] {
    opacity: 0.6;
}
回到顶部