title: Disabling React components with radio buttons using Material-UI
body: <p>I'm quite new to ReactJS and Material-UI. Only working for roughly 3 weeks with those. The problem I'm struggling with right now is:
  -I have 2 radio buttons in a group and 2 components (text field and select field);
  -I want to disable the textField when the first radio button is checked while the selectField is still active;
  -When the 2nd radio button is checked the textField should be enabled and the selectField should be enabled;</p>
  
  <p>Thank you in advance for any help you can provide! :)
  I have the following:</p>
  
  <p><strong>The radio buttons component</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {Component} from 'react';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  import {RadioButton, RadioButtonGroup} from 'material-ui/RadioButton';
  
  
  
  
  
  const styles = {
      block: {
          maxWidth: 30,
      },
      radioButton: {
          marginBottom: 16,
          maxWidth: 10,
      },
  };
  
  
  export let disable1=false;
  export let disable2=false;
  class RadioBtn extends Component {
      
      render() {
  
          function change()
          {
              if (RadioButtonGroup.valueSelected === "0") {
                  disable2 = true;
                  disable1 = false;
                  return disable1;
              }
              else if (RadioButtonGroup.valueSelected === "1") {
                  disable1 = true;
                  disable2 = false;
                  return disable2;
              }
          }
  
  
  
          return (
              &lt;MuiThemeProvider&gt;
                  &lt;div&gt;
                      &lt;RadioButtonGroup name="search" defaultSelected="0" onChange={change()} &gt;
                          &lt;RadioButton
                              value="0"
  
                              style={styles.radioButton}
  
                              name="users"
                              className="users"
                          /&gt;
                          &lt;RadioButton
                              value="1"
                              style={styles.radioButton}
                              name="team"
                              className="team"
                          /&gt;
                      &lt;/RadioButtonGroup&gt;
  
  
                  &lt;/div&gt;
  
              &lt;/MuiThemeProvider&gt;
  
          )
      }
  
  }
  
  export default RadioBtn;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>The selectField component</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {Component} from 'react';
  import SelectField from 'material-ui/SelectField';
  import MenuItem from 'material-ui/MenuItem';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  import getMuiTheme from 'material-ui/styles/getMuiTheme';
  import './Team.css';
  import {disable2} from '../radioButton/RadioBtn';
  
  const muiTheme3 = getMuiTheme({
      palette: {
          color: 'fff',
          primary1Color: '#005FA8',
          accent1Color: '#fff',
          accent3Color: '#005FA8',
          textColor: '#000',
          alternateTextColor: '#005FA8',
          hintColor: '#ff0000',
          labelColor: '#000',
          floatingLabelText: '#000',
      },
      tableHeaderColumn: {
          textColor: '#000',
          height: 56,
          spacing: 24,
      },
  
      textField: {
          color: '#000',
      },
      menu: {
          backgroundColor: '#005FA8',
          containerBackgroundColor: '#005FA8',
          borderColor: '#005FA8',
      },
      table: {
          backgroundColor: '#005FA8',
          borderColor: '#005FA6',
      },
      icon: {
          color: '#000',
      },
  });
  
  const styles = {
      customWidth: {
          width: 500,
  
      },
  };
  class Team extends Component {
  
      state = {
          value: 1,
      };
  
      handleChange = (event, index, value) =&gt; this.setState({value});
  
      render() {
  
          return (
              &lt;MuiThemeProvider muiTheme={muiTheme3}&gt;
              &lt;div id="div-color"&gt;
                  &lt;SelectField
                      // floatingLabelText="Team" floatingLabelStyle={{color: '#000', fontSize: 20}}
  
                               menuItemStyle={{backgroundColor: '#005FA8'}}
                               listStyle={{backgroundColor: '#005FA8', containerBackgroundColor: '#005FA8'}}
                               underlineStyle={{borderColor: '#000'}}
                               maxHeight={300}
                               value={this.state.value}
                               onChange={this.handleChange}
                               style={styles}
                               disabled={disable2}
  
                  &gt;
                      &lt;MenuItem value={1} selected disabled primaryText="Select a team" /&gt;
                      &lt;MenuItem value={2} primaryText="Team1" /&gt;
                      &lt;MenuItem value={3} primaryText="Team2" /&gt;
                      &lt;MenuItem value={4} primaryText="Team3" /&gt;
                      &lt;MenuItem value={5} primaryText="Team4" /&gt;
                      &lt;MenuItem value={6} primaryText="Team5" /&gt;
                      &lt;MenuItem value={7} primaryText="Team6" /&gt;
                      &lt;MenuItem value={8} primaryText="Team7" /&gt;
                      &lt;MenuItem value={9} primaryText="Team8" /&gt;
                      &lt;MenuItem value={10} primaryText="Team9" /&gt;
                      &lt;MenuItem value={11} primaryText="Team10" /&gt;
                      &lt;MenuItem value={12} primaryText="Team11" /&gt;
                      &lt;MenuItem value={13} primaryText="Team12" /&gt;
                      &lt;MenuItem value={14} primaryText="Team13" /&gt;
                      &lt;MenuItem value={15} primaryText="Team14" /&gt;
                      &lt;MenuItem value={16} primaryText="Team15" /&gt;
  
  
                  &lt;/SelectField&gt;
              &lt;/div&gt;
              &lt;/MuiThemeProvider&gt;
          );
      }
  }
  
  export default Team;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>The textField component</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {Component} from 'react';
  import MenuItem from 'material-ui/MenuItem';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  import getMuiTheme from 'material-ui/styles/getMuiTheme';
  import TextField from 'material-ui/TextField';
  import test from '../selectComponent/SelectComponent';
  import {disable1} from '../radioButton/RadioBtn';
  // let disable1 = false;
  // disable1 = test;
  
  
  const styles = {
      errorStyle: {
          borderColor: 'red',
          color: 'red',
      },
      underlineStyle: {
          borderColor: "#000",
      },
      underlineFocusStyle: {
          borderColor: "#005FA8",
      },
      floatingLabelStyle: {
          color: '#000',
      },
      floatingLabelFocusStyle: {
          color: '#000',
      },
      hintStyle: {
          color: '#000',
      }
  };
  
  
  class Users extends Component {
  
  
      render (){
  
  
          return (
              &lt;MuiThemeProvider&gt;
              &lt;div&gt;
  
                  &lt;TextField
                      hintText="Search for a user"
                      underlineFocusStyle={styles.underlineFocusStyle}
                      underlineStyle={styles.underlineStyle}
                      errorStyle={styles.errorStyle}
                      hintStyle={styles.hintStyle}
                      disabled={disable1}
                  /&gt;
  
              &lt;/div&gt;
              &lt;/MuiThemeProvider&gt;
          )
      }}
  
  export default Users;</code></pre>
  </div>
  </div>
  </p>