JSFiddle - React, Tailwind, and code Playground

by fest1val

HTML

<div class="row">
  <div class="col-md-4 radio__item">
    <div class="radio">
      <label>
        <input type="radio" name="myRadio" class="checkRadio"> <b>Check 1</b>
      </label>
    </div>
    <input type="text" class="form-control">
  </div>
  <div class="col-md-4 radio__item">
    <div class="radio">
      <label>
        <input type="radio" name="myRadio" class="checkRadio"> <b>Check 2</b>
      </label>
    </div>
    <input type="text" class="form-control">
  </div>
  <div class="col-md-4 radio__item">
    <div class="radio">
      <label>
        <input type="radio" name="myRadio" class="checkRadio"> <b>Check 3</b>
      </label>
    </div>
    <input type="text" class="form-control">
  </div>
</div>

CSS

.disabled {
  pointer-events: none;
  color: #ececec;
}

JavaScript

$('.checkRadio').change(function() {
  $('.radio__item').addClass('disabled');
  
  var item = $(this).parent().parent().parent();
  item.removeClass('disabled');
});