I want to change the label color in my interface when the input is disabled with Typescript or CSS

Here is my interface :

my interface

Here is my code :

<tr>
      <td className="name">Critère d'agrégation</td>
      <td className="value column-2">
        {aggregationDomain.map(codedValue => 
             <label >
             <input type="radio" name="AggregationSelection" 
             value={codedValue.code} checked={props.reportConfig.aggregation === 
             codedValue.code} onChange={updateAggregation} disabled= 
             {!config?.aggregationEnabled.includes(codedValue.code)} 
             />

                 {codedValue.name}
             </label>
        )}
     </td>
 </tr> 

I'm working with React (typescript), if someone has the answer I'd appreciate it! thnks

CodePudding user response：

set the same condition you are using for disabled in label tag for color

  <label color={!config?.aggregationEnabled.includes(codedValue.code) ? 'red': 'black'}

CodePudding user response：

You should reorder your code to get input out of the label

<tr>
  <td className="name">Critère d'agrégation</td>
  <td className="value column-2">
    {aggregationDomain.map(codedValue => 
       <>
         
         <input type="radio" name="AggregationSelection" 
         value={codedValue.code} checked={props.reportConfig.aggregation === 
         codedValue.code} onChange={updateAggregation} disabled= 
         {!config?.aggregationEnabled.includes(codedValue.code)} 
         />

         <label >{codedValue.name}</label>
       </>
    )}
 </td>

Here's an example, it's not something specific to react, just copy css and provide it to your code

input[type='radio']:disabled label {
  color: #ccc;
}

<div>
  <input type='radio' name='demo' id='option1' />
  <label for='option1'>Option 1</label>
</div>
<div>
  <input type='radio' name='demo' id='option2' disabled />
  <label for='option2'>Option 2 (Disabled)</label>
</div>
<div>
  <input type='radio' name='demo' id='option3' />
  <label for='option3'>Option 3</label>
</div>