<h1>Disabling form inputs</h1>

<form>

  <fieldset>
    <p>Do you like ice cream?</p>
    <label>
      <input name=iceCream type=radio value=yes>
      <span>Yes</span>
    </label>
    <label>
      <input name=iceCream type=radio value=no>
      <span>No</span>
    </label>
  </fieldset>

  <fieldset>
    <p>What flavour(s) do you like?</p>
    <label>
      <input name=flavour type=checkbox value=chocolate>
      <span>Chocolate</span>
    </label>
    <label>
      <input name=flavour type=checkbox value=vanilla>
      <span>Vanilla</span>
    </label>
    <label>
      <input name=flavour type=checkbox value=strawberry>
      <span>Strawberry</span>
    </label>
  </fieldset>

</form>
[disabled],
[disabled] ~ span {
  opacity: .7;
  cursor: not-allowed;
}

fieldset {
  border: none;
  background: white;
  margin: 1em 0;
  padding: 1em;
  border-radius: 3px;
}

label span {
  font-size: 12pt;
  margin-right: .5em;
}
fieldset p {
  margin-bottom: 1em;
}
// Listen to 'change' event on input[name=iceCream] tags
document.querySelectorAll('input[name=iceCream]').forEach(tag =>

  tag.addEventListener('change', e => toggleFlavours(e.target.value))

)

function toggleFlavours(value) {

  // Find all input[name=flavour] tags
  document.querySelectorAll('input[name=flavour]').forEach(tag =>

    // Set disabled attribute based on value of current input[name=iceCream]
    value === 'no'
    ? tag.disabled = true
    : tag.disabled = false

  )

}
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,700,300italic,400italic,500italic,700italic
  2. https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic
  3. https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,500,600,700,900
  4. https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic,900,900italic
  5. https://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic
  6. https://s3-us-west-2.amazonaws.com/s.cdpn.io/67439/basic.css
  7. https://s3-us-west-2.amazonaws.com/s.cdpn.io/67439/data-buttons.css

External JavaScript

This Pen doesn't use any external JavaScript resources.