Habilitar/Deshabilitar Input CSS o JS

http://www.forosdelweb.com/f13/checkbox-habilita-text-1163612/

by Arturo Gallegos

HTML

<h1>Habilitar/Deshabilitar input con CSS</h1>
<div class="options">
  <input type="checkbox" name="" id="">
  <input type="text" name="" id="">
</div>
<div class="options">
  <input type="checkbox" name="" id="">
  <input type="text" name="" id="">
</div>
<h1>Habilitar/Deshabilitar input con Javascript</h1>
<div class="options-js">
  <input type="text" name="" id="i1" disabled>
  <input type="checkbox" name="" class="check" data-id="i1">
</div>
<div class="options-js">
  <input type="text" name="" id="i2" disabled>
  <input type="checkbox" name="" class="check" data-id="i2">
</div>
<div class="options-js">
  <input type="text" name="" id="i3" disabled>
  <input type="checkbox" name="" class="check" data-id="i3">
</div>

SASS

h1
  font-weight: 800
  color: #f30
  font-size: 15px
  padding: 20px 20px 0
input
  height: 33px
  padding: 0 10px

.options, .options-js
  display: flex
  padding: 20px
  input[type="checkbox"]
    order: 2
    margin-left: 10px
    
.options
  input[type="text"]
    background: #eee
    border: 1px #ccc solid
    pointer-events: none
  input:checked + input
    pointer-events: inherit
    background: #fff
    border-color: #888

JavaScript

let checks = document.querySelectorAll('.check');
checks.forEach(function(check){
  check.addEventListener('change', function(){
    let input = document.getElementById(this.getAttribute('data-id'));
    input.disabled = !this.checked;
    input.focus();
  })
})