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="checkbox" 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="checkbox" 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="checkbox" 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() {
	var self = $(this);  
  if(self.prop('checked')) {
    $('.radio__item').addClass('disabled');

    var item = self.parent().parent().parent();
    item.removeClass('disabled');
  } else {
  	$('.radio__item.disabled').removeClass('disabled');
  }
});