Change color or style of disabled option

[SandeshVakale]

New feature if not available.

Need information if feature is available.

I need a way to show that checkbox is disabled using different colour or other style for it.

Thanks.

[SandeshVakale]

I tried something like this.

<CheckBox style={{flex: 1, padding: 10}} onClick={() => this.handleClick(items.name, items.value)} isChecked={items.selected} rightText={items.placeholder} disabled={items.disabled} unCheckedImage={items.disabled === true ? <Icon name='ban' size={30} color='#00627b' /> : null} checkBoxColor={'#00627b'} rightTextStyle={{color: '#00627b'}} />

This is working for me. So closing this issue.

[KirankumarDafda]

can you please explain what are items.name, items,value, items,selected etc., used here ?

[Kaushaljsathwara]

Hi SandeshVakale,

Can you send me your JSON formate for more details?

Thanks Kaushal Sathwara

[SandeshVakale]

Here it is ...

      {
        "type": "checkbox",
        "placeholder": "new",
        "name": "is_new",
        "value": 1,
        "selected": false,
        "disabled": false
      },
{.......}

[Kaushaljsathwara]

Hello SandeshVakale,

Thank for your response As per your example I have toggle the checked and unchecked images. But now I have to change color according to the checked and unchecked image.

Means when I checked the checkbox my 'rightTextStyle color set to red. and when I uncheck the checkbox my 'rightTextStyle color set to gray.

I have done something like this will work when the page is load first time. but with my check uncheck activity this code is not working. If you know then please share with me.

My code as below,

global.check = '#F77062';
global.uncheck = '#878787';

 <CheckBox
                style={{ flex: 1, padding: 10 }}
                onClick={() => { this.onClick(data) }}
                isChecked={data.checked}
                rightText={data.name}
                disabled={data.checked}
                unCheckedImage={data.checked === true ? <Image style={MyStyle.checkEnableImg} source={require('../Images/cBoxE.png')} /> : <Image style={MyStyle.checkEnableImg} source={require('../Images/cBoxD.png')} />}
                checkBoxColor={'#F77062'}
                rightTextStyle={data.checked === true ? { color: global.check } : { color: global.uncheck }} />

[KirankumarDafda]

Hello @Kaushaljsathwara If you are able to use state then there is one solution

constructor(props){
    super(props);
    this.state = {
        isChecked: true,
    }
}

<CheckBox
    style={{ flex: 1, padding: 10 }}
    onClick={() => { this.onClick(data) }}
    isChecked={this.state.isChecked}
    rightText={data.name}
    disabled={data.checked}
    unCheckedImage={this.state.isChecked ? <Image style={MyStyle.checkEnableImg} source={require('../Images/cBoxE.png')} /> : <Image style={MyStyle.checkEnableImg} source={require('../Images/cBoxD.png')} />}
    checkBoxColor={'#F77062'}
    rightTextStyle={this.state.isChecked ? { color: global.check } : { color: global.uncheck }} 
/>

onClick = () =>{
   if(this.state.isChecked){
       this.setState({ isChecked: false });
   }else{
       this.setState({ isChecked: true });
   }
}

[Kaushaljsathwara]

Hello KirankumarDafda,

Thank for your effort, I had tried using stats but it's not working for me that's why I have used a global variable but no any luck.

Thanks

[Kaushaljsathwara]

Hello SandeshVakale,

I have used you this logic and it's checked unchecked image displaying correctly according to JSON: 'disabled' true false response. but when I click on checked images this all checked images are not unchecked even not call my click function when I click on the checked image.

unCheckedImage={items.disabled === true ? <Icon name='ban' size={30} color='#00627b' /> : null}

Thanks,

[SandeshVakale]

Hello Kaushaljsathwara,

On every click, on the checkbox, I update it with my backend. And my screen rerenders with new data. I am not using state inside the constructor. In short, My back updates himself on every operation and after every operation, I make a request from back to get new data. This makes me use get and post multiple times if my form is very big.

This is how it is working for me.

Thanks.

[Kaushaljsathwara]

Hello SandeshVakale, Thanks for your sharing the answer. But my problem is the below please check my screenshot for more details. I have a get the JSON response:

[ { "name": "Aire acondicionado", "value": "aire_acondicionado", "checked": true }, { "name": "Ascensor", "value": "ascensor", "checked": false },

and in my edit page, I'll display checkbox tick untick according to the checked box true and false value. but when this page loads my checkbox true value, I can change it. I can only change unchecked values.

Please let me know If you are getting this problem. Thanks