title: How can I disable checkboxes and radio buttons from separate components?
body: <p>Running into this ReactJS (with Redux) issue:</p>
  
  <p><a href="https://i.stack.imgur.com/8wpie.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8wpie.jpg" alt="enter image description here"></a></p>
  
  <p>If premium white isn’t selected, gloss finish should be disabled. The radio button (premium) and checkbox (gloss) have separate methods in separate components – looks like they are both using state to send data.</p>
  
  <p>Here’s the checkbox</p>
  
  <pre><code>  buildCheckbox(item) {
      return (
        &lt;Checkbox
          key={item.key}
          label={item.display}
          name={item.key}
          checked={this.props.order[item.key] || false}
          onChange={checked =&gt; this.handleCheck(checked, item.key)}
          disabled={item.disabled(this.props.order)}
        /&gt;
      );
    }
  </code></pre>
  
  <p>And the handleclick method used</p>
  
  <pre><code>  handleCheck(checked, key) {
      const { params, updateOrder } = this.props;
      const { sessionId } = params;
  
      // if doulbeSided option is removed, then clear the inside file.
      if (key === 'doubleSided' &amp;&amp; !checked) {
        updateOrder(sessionId, { inside: null });
      }
  
      // set ink coverage based on printed flag
      if (key === 'printed') {
        const inkCoverage = checked ? 100 : 0;
        updateOrder(sessionId, { inkCoverage });
      }
  
      // if unprinted, remove doublesided and gloss options
      if (key === 'printed' &amp;&amp; !checked) {
        updateOrder(sessionId, { doubleSided: false });
        updateOrder(sessionId, { gloss: false });
      }
  
      updateOrder(sessionId, { [key]: checked });
    }
  </code></pre>
  
  <p>And the radio button’s method</p>
  
  <pre><code>  onClick(id, ordAttribute) {
      const { updateOrder, sessionId, validator } = this.props;
      updateOrder(sessionId, { [ordAttribute]: id });
  
      if (validator) validator(ordAttribute);
    }
  </code></pre>
  
  <p>I saw that gloss has a service which is toggling disabled or not via the printed key on state here</p>
  
  <pre><code>gloss: {
    display: 'Gloss Finish',
    key: 'gloss',
    component: 'checkbox',
    disabled: state =&gt; !state.printed,
  },
  </code></pre>
  
  <p>I’ve thought about creating a fourth radio button and just deleting the gloss option but I’m not sure where it’s being populated from – also thought about using a display none on the styles of the gloss that is activated via the radio button – but am not sure where to start.</p>
  
  <p>just stated a new job and this is the previous employee's code - trying to figure it out. looks like the state is activated via this Action method:</p>
  
  <pre><code>export const updateOrder = (sessionId, payload) =&gt; (dispatch, getState) =&gt; {
    dispatch(updateAction({ ...payload }));
    const state = getState();
    const ord = getNewOrderForm(state);
    const minOrdValue = getMinOrdValue(state);
    const { length, width, height, style, blankLength, blankWidth, qty, leadTime, sqFeet } = ord;
    const priceMatrix = style ? getPriceMatrix(state)[style.priceMatrix] : null;
  
    if (priceMatrix &amp;&amp; style &amp;&amp; style.calcPrice) {
      dispatch(dispatchNewPrice(ord, style, priceMatrix, minOrdValue));
    }
  
    if (shouldCalcBlank({width, length, height}, style)) {
      calcBlanks(style, {width, length, height})
      .then(blanks =&gt; dispatch(updateAction(blanks)))
      .catch(err =&gt; console.log('error', err))
    }
  
    if (blankLength &amp;&amp; blankWidth &amp;&amp; qty) {
      calcSquareFeet({ blankLength, blankWidth, qty })
        .then(sqFeet =&gt; {
          dispatch(updateAction({ sqFeet }));
          return sqFeet;
        })
        .then(sqFeet =&gt; sqFeet &gt; 1000)
        .then(lrgSqFeet =&gt; {
          dispatch(updateAction({ lrgSqFeet }));
          return lrgSqFeet;
        })
        .then(lrgSqFeet =&gt; {
          if (lrgSqFeet &amp;&amp; leadTime === 'rush') {
            dispatch(updateAction({ leadTime: 'standard' }));
          }
        });
    }
  
    if (sqFeet &amp;&amp; (!blankLength || !blankWidth || !qty)) {
      dispatch(updateAction({ sqFeet: 0 }));
    }
  
    localStorage.setItem(sessionId, JSON.stringify(getNewOrderForm(getState())));
  };
  </code></pre>
  
  <p>i thought about adding a the radio button has an id of 'clearwater' so i thought about adding a bool to this method that could then be accessed as clearwater: false (and when onClick is activated, updateOrder then changes it to clearwater: true, and then the gloss object in the service would then check disabled: state => !state.printed &amp;&amp; !state.clearwater (this didn't work):</p>
  
  <pre><code>export const generateNewOrder = (userid, style, sessionId = uuid()) =&gt; dispatch =&gt; {
    localStorage.setItem(
      sessionId,
      JSON.stringify({
        userid,
        style,
        sessionId,
        blindShip: true,
        inkCoverage: '100',
        printed: true,
      })
    );
    history.push(`/order/new/${style.styleCode}/${sessionId}`);
    dispatch(
      newOrder({
        userid,
        style,
        sessionId,
        blindShip: true,
        inkCoverage: '100',
        printed: true,
      })
    );
  
    if (style.type === 'static') {
      const { dims, blankLength, blankWidth } = style;
      const payload = {
        ...dims,
        blankLength,
        blankWidth,
      };
  
      dispatch(updateOrder(sessionId, payload));
    }
  };
  </code></pre>
  
  <p>I was hoping by changing the Service attached to the checkbox, I could add an additional condition that would cause the disabled functionality to be dependent on the state.boardStyle, but this doesn't seem to work (picture below isn't accurate, i changed it to boardStyle):</p>
  
  <p><a href="http://oi65.tinypic.com/wknzls.jpg" rel="nofollow noreferrer">http://oi65.tinypic.com/wknzls.jpg</a></p>
  
  <p>This is using redux -- kind of new to redux -- let me know if I'm missing any info -- I will post anything to get this solved.</p>
  
  <p>Any help would be huge – thanks so much!</p>