uni-app H5端 radio 设置了disable属性后样式按钮颜色没变灰

信息类别	详细信息
产品分类	uniapp/H5
操作系统	Windows
版本号	win10
开发工具	HBuilderX
工具版本	3.2.16
浏览器	Chrome
浏览器版本	11
项目创建方式	HBuilderX

操作步骤：

运行到H5

预期结果：

按钮变灰

实际结果：

按钮没变灰

bug描述：

radio 设置了disable属性后

相关链接：

更多关于uni-app H5端 radio 设置了disable属性后样式按钮颜色没变灰的实战教程也可以访问 https://www.itying.com/category-93-b0.html

itying888 1楼

问题已记录后续优化，已加分，感谢您的反馈！

更多关于uni-app H5端 radio 设置了disable属性后样式按钮颜色没变灰的实战教程也可以访问 https://www.itying.com/category-93-b0.html

h691938207 2楼

HBuilder X 3.6.9-alpha已修复

itying888 3楼

在uni-app H5端，radio组件设置disabled属性后样式未变灰，是因为H5平台的radio组件默认样式未包含禁用状态的颜色变化。这属于平台差异问题，H5端需要手动处理禁用状态的样式。

解决方案：

使用条件样式：通过判断disabled属性动态添加样式类。

<template>
  <view>
    <radio :disabled="true" :class="isDisabled ? 'disabled-radio' : ''" />
  </view>
</template>
<style>
.disabled-radio {
  opacity: 0.5;
  /* 或使用filter灰度效果 */
  filter: grayscale(100%);
}
</style>

全局样式覆盖：在App.vue或公共CSS中定义禁用状态的通用样式。
```
radio[disabled] {
  opacity: 0.6;
  pointer-events: none;
}
```

使用uni.css变量（若项目支持）：通过CSS变量统一控制。

:root {
  --radio-disabled-color: #ccc;
}
radio[disabled] {
  color: var(--radio-disabled-color);
}