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:

interface image

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!

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

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to create a dropdown menu in React js with an array of items

Can we structure the array without splitting it into two parts and iterating over them? arrayList=[Jeans, Jackets, Pants, Fragrance, Sunglasses, Health Products] <div className='Flexbox'> //arrayList1.map](//arrayList1.map)(x=>return(< ...

Menus that mimic the style of Google Translate's select options

I'm looking to design an HTML select menu using CSS in a similar fashion to Google Translate's style on Google Translate. I've searched for tutorials online, but they all involve jQuery. Is there a way to achieve something similar using only ...

Tips for storing checkbox preferences in a user account on an HTML/PHP website

Hello! I am currently working on a website. I have included a checkbox that updates the option selected in phpMyAdmin. The issue I am facing is that when I press submit and then refresh the page using F5, the preference I chose disappears on the client s ...

What is the best way to enhance a React Native component's properties with Flow?

I'm currently working with Flow version 0.54.1 in my React Native project, specifically using version 0.48.3. I have developed a component named PrimaryButton that acts as a wrapper for the native TouchableOpacity component. My goal is to define custo ...

Combining Laravel with React

Currently in the process of developing a substantial real estate listings platform with react and laravel. Can you suggest which approach would be better for this project and explain why? Option 1: Implement laravel react presets and store all react compo ...

Error: Unable to locate command "start" when running `yarn start`

When I run 'yarn start' command, I encounter an error message stating that the command "start" was not found. Could this issue be due to the absence of a script tag in my package.json file? Any suggestions on how to resolve this?</p> <p& ...

Place attribute value directly under the border of an HTML element using a combination of JavaScript and CSS

I'm currently working on a JavaScript script to scan the DOM for elements that have a specific custom attribute called example-type. The goal is to apply CSS styling to draw a border around these elements and then display the value of the example-type ...

Error Passing Data to Child Component in Typescript on Next.JS 14 Compilation

Although there are many similar questions, I am struggling to make my code work properly. I recently started learning typescript and am having trouble passing data to the child component. While the code runs fine in development (no errors or warnings), i ...

Adjust the content within an HTML div by utilizing AngularJS

Snippet of AngularJs code to display different content based on selection: <select> <option value="0">--Select--</option> <option value="1">Individual</option> <option value="2"> ...

How can I stop MUI Button from automatically becoming fullWidth?

One of the challenges I encountered was styling a Button component from MUI: export const ButtonStyle = styled((props) => <Button {...props} />)(({ theme }) => ({ marginTop: 8, marginBottom: 8, width: 'auto', borderRad ...

Error: Unable to access the 'category_affiliation' property of null

After implementing a login function using redux state, I encountered an issue upon logging in. The error message TypeError: Cannot read properties of null (reading 'category_affiliation') is being displayed in my Sidebar.jsx file. It seems like t ...

Looking for an image that spans the entire height of the container

I need help with positioning an img inside a div container that has a background color. I want the image to overlay on top of the div, extending beyond its height without causing any scroll bars. Here is a fiddle related to this issue: http://jsfiddle.net ...

Unable to adjust the dimensions of a Mailchimp input field

Having some trouble customizing my Mailchimp form a bit and could use some assistance. Snippet of the code: <!-- Begin MailChimp Signup Form --> <link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type=" ...

Managing User Roles in a Front-end React JS MERN Application

In my MERN APP (MongoDB, Express, ReactJS, NodeJS), I handle the logged user on the backend using tokens to grant access based on their role. Now, the question arises: How can I control the user's role on the front-end (ReactJS) to distinguish betwee ...

Tips on changing the default value of a Material UI prop method in React JS

Currently, I'm utilizing React JS and I've brought in a component from Material UI known as (https://material-ui.com/api/table-pagination/). My goal is to customize the Default labelDisplayedRows that looks like this: ({ from, to, count }) => ...

Utilizing JavaScript to dynamically set the height and width of a canvas based on the user input

How can I take user input for height and width values and apply them to a newly created canvas? I am able to retrieve the values, but I'm unsure how to set them as the style.height and style.width properties. var createNewCanvas = document.getEleme ...

CSS can be utilized to craft intricate and dynamic shapes

Currently, I am attempting to produce a trapeze-like design utilizing various techniques in order to achieve the best possible outcome. The shape I am aiming to create is similar to this: (the content inside the shape will consist of images and text) Th ...

Discovering the proper method to reach the parent element in jQuery while within the click event

How can I use jQuery to access the parent element within a click event? $(document).ready(function () { $(".lv1 li").click(function (event) { this.parentElement.parentElement.textContent = this.textContent; $.ajax({ type: 'post&apo ...

Can you show me how to create a React Testing Library test that verifies how hovering changes the style of components?

I am currently testing my application and came across a peculiar issue. As I was attempting to test whether a row in my dropdown component triggers an effect on hover, I noticed that I was unable to verify elements based on their background color. Even wh ...

IE compatibility mode causing ckeditor dropdown to be hidden

When using the CKEditor editor bar inside a green div with another div below it, I noticed that when clicking on "font" or any other option that opens a dropdown menu, it gets hidden behind the bottom div. This issue seems to occur in browsers like Chrome ...