Adjusting label color when input is deactivated in a React application using TypeScript

Question

Adjusting label color when input is deactivated in a React application using TypeScript

Is there a way to change the label color in my view when the input is disabled using Typescript or CSS?

This is the interface I am working with:

Here is the code snippet:

<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 am currently working with React (typescript) and would appreciate any help on this matter. Thank you!

html css reactjs

Answer 1

Answer №1

You may want to consider reordering your code in order to separate input from 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>

For instance, you can use this example as a reference for styling purposes. It's not specific to react, simply copy the css and apply 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>

Answer 2

You may want to consider reordering your code in order to separate input from 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>

For instance, you can use this example as a reference for styling purposes. It's not specific to react, simply copy the css and apply 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>

Answer 3

Answer №2

apply the disabled condition from the label tag to control the color

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

Answer 4

apply the disabled condition from the label tag to control the color

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

Adjusting label color when input is deactivated in a React application using TypeScript

Answer №1

Answer №2

Similar questions

Enabling onClick based on conditions

Inject a cookie into the Axios interceptor for the request handler

Leveraging icons with Bootstrap 4.5

What is the best way to utilize the sx prop in Material UI for applying styles specifically when the component is active or selected?

New feature in NextAuth.js: Credentials authentication with reset password functionality included

Can the style of certain words within a paragraph be altered using CSS only, without the need for any HTML tags?

Android: Substituting < p > and < br / > elements

- Lorem ipsum dolor sit amet, consectetur adipiscing elit

What is the process for refreshing the state in the handleReducer function?

React's useState Hook: Modifying Values

Vercel is encountering difficulty locating a module or type declaration during the construction of a Next.js application

Building React Typescript Components with Froala Editor Plugins

Resizing rectangular images with CSS/Bootstrap into perfect squares

How can I connect an HTML page to an MS-Access database?

Tips for Preserving the HTML Page State After Making jQuery Changes

Red X appearing in IE9 for HTML5 Video

Can you customize the buttons in the operation panel of an antd image preview window?

What is the most efficient method for updating URLs in CSS files before the website goes live?

I find it difficult to customize columns in grid template areas

What is causing the error message 'Unexpected use of 'location' no-restricted-globals'?