React(TypeScript)中输入框禁用时如何修改标签颜色

方法一：CSS选择器直接关联（最简方案） #

利用单选框的:disabled伪类，结合DOM结构关系直接修改对应label的样式，无需额外TypeScript逻辑。

场景1：input与label为相邻兄弟（用for/id关联） #

渲染代码示例：

{codedValues.map(codedValue => {
  const isDisabled = !config?.aggregationEnabled.includes(codedValue.code);
  return (
    <div key={codedValue.code}>
      <input
        type="radio"
        id={`radio-${codedValue.code}`}
        disabled={isDisabled}
        name="aggregation-option"
        value={codedValue.code}
      />
      <label htmlFor={`radio-${codedValue.code}`}>
        {codedValue.label}
      </label>
    </div>
  );
})}

对应的CSS：

/* 单选框禁用时，修改相邻label的样式 */
input[type="radio"]:disabled + label {
  color: #999; /* 自定义禁用态颜色 */
  cursor: not-allowed; /* 可选：添加禁用光标提示 */
}

场景2：label包裹input #

渲染代码示例：

{codedValues.map(codedValue => {
  const isDisabled = !config?.aggregationEnabled.includes(codedValue.code);
  return (
    <label key={codedValue.code}>
      <input
        type="radio"
        disabled={isDisabled}
        name="aggregation-option"
        value={codedValue.code}
      />
      {codedValue.label}
    </label>
  );
})}

对应的CSS（需浏览器支持:has选择器，现代浏览器均兼容）：

label:has(input[type="radio"]:disabled) {
  color: #999;
  cursor: not-allowed;
}

方法二：TypeScript动态控制className（更灵活） #

根据禁用状态给label添加不同类名，再通过CSS定义样式，适合需要多状态区分的场景。

渲染代码示例：

{codedValues.map(codedValue => {
  const isDisabled = !config?.aggregationEnabled.includes(codedValue.code);
  // 根据状态切换类名
  const labelClassName = isDisabled ? "radio-label--disabled" : "radio-label";
  return (
    <div key={codedValue.code}>
      <input
        type="radio"
        disabled={isDisabled}
        name="aggregation-option"
        value={codedValue.code}
      />
      <label className={labelClassName}>
        {codedValue.label}
      </label>
    </div>
  );
})}

对应的CSS：

.radio-label {
  color: #333; /* 正常态颜色 */
  cursor: pointer;
}

.radio-label--disabled {
  color: #999; /* 禁用态颜色 */
  cursor: not-allowed;
}

如果使用CSS Modules，直接导入样式文件即可，TypeScript会自动识别类型。

方法三：内联样式（应急方案） #

直接通过TypeScript给label设置内联样式，适合简单场景，但不推荐长期使用（样式与逻辑耦合）：

{codedValues.map(codedValue => {
  const isDisabled = !config?.aggregationEnabled.includes(codedValue.code);
  return (
    <div key={codedValue.code}>
      <input
        type="radio"
        disabled={isDisabled}
        name="aggregation-option"
        value={codedValue.code}
      />
      <label 
        style={{ 
          color: isDisabled ? "#999" : "#333",
          cursor: isDisabled ? "not-allowed" : "pointer"
        }}
      >
        {codedValue.label}
      </label>
    </div>
  );
})}

内容的提问来源于stack exchange，提问作者Achraf