CODEWITHSUNDEEP
javascriptreactjsreact-native
Abhigyan Gaurav
Abhigyan Gaurav

Reputation: 1904

How to make button disabled if all checkbox are unchecked in react native

There are 3 check boxes and I have to make one check box mandatory . Like if all checkbox are un checked then button should be disabled . Please help me for that . How I can do .

<View style={{ flexDirection: 'row', paddingLeft: 15 }}>
  <View style={{ flex: 1 }}>
    <CheckBox color="#00678f" 
      checked={this.state.notification.isContactByPost}
      onPress={() => this.handleChange('isContactByPost')} 
    />
 </View>
 <View style={{ flex: 1 }}>
   <Text style={{ fontSize: 14 }}>Post</Text>
 </View>
 <View style={{ flex: 1 }}>
   <CheckBox color="#00678f"
     checked={this.state.notification.isContactByEmail}
     onPress={() => this.handleChange('isContactByEmail')} 
   />
 </View>
 <View style={{ flex: 1 }}>
   <Text style={{ fontSize: 14 }}>Email</Text>
 </View>
 <View style={{ flex: 1 }}>
   <CheckBox color="#00678f"
     checked={this.state.notification.isContactBySms}
     onPress={() => this.handleChange('isContactBySms')}
   />
 </View>
 <View style={{ flex: 1 }}>
   <Text style={{ fontSize: 14 }}>SMS</Text>
 </View>
</View>  
<View style={{ marginTop: 50 }}>
 <PrimaryBtn 
   label={'submit'}
   disabled={false}
   onPress={() => this.OnButtonClick(this.state.notification)} 
 />
 </View>
 </View>

Thanks

Upvotes: 1

Views: 1508

Answers (3)

Mohammed Ashfaq
Mohammed Ashfaq

Reputation: 3426

render(){
  const {isContactByPost,isContactByEmail,isContactBySms } = this.state.notification; 
  return (
    <PrimaryBtn 
      label={'submit'} 
      disabled={!(isContactByPost || isContactByEmail || isContactBySms)}
      onPress={() => this.OnButtonClick(this.state.notification)} 
    />
  );
}

Upvotes: 1

Amir Hedieh
Amir Hedieh

Reputation: 1178

Try this (to make it more simple i removed redundant parts) =>

const {isContactByPost, isContactByEmail, isContactBySms} = this.state.notification
const isButtonDisabled = !(isContactByPost || isContactByEmail || isContactBySms)

<PrimaryBtn disabled={isButtonDisabled} /> // don't forget your others props :)

Upvotes: 1

Shmili Breuer
Shmili Breuer

Reputation: 4147

This is how you can do it

<PrimaryBtn label={'submit'} disabled={!this.state.notification.isContactByPost && 
    !this.state.notification.isContactByEmail && 
    !this.state.notification.isContactBySms}  onPress={() => 
    this.OnButtonClick(this.state.notification)} />

Hope this helps

Upvotes: 2

Related Questions