JSFiddle - React, Tailwind, and code Playground

by naokiota

HTML

<input type="checkbox" id="checkbox1"  name="A" value="A">
<input type="checkbox" id="checkbox2"  name="B" value="B" disabled>
    <div class="1">
   <p>11111111 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    </p>
 </div>   
<div class="2">
   <p>22222222222 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    </p>
 </div>

JavaScript

$(document).ready(function(){
   $(".1, .2").hide();    
    
   $("#checkbox1").change(function() {
    $(".1, .2").hide();    
    if (this.checked) {
        $("#checkbox2").attr("disabled", true);
        $(".1").show();
    }else {
        $("#checkbox2").attr("disabled", false);       
    }
   });
  $("#checkbox2").change(function() {
    $(".1, .2").hide();    
    if (this.checked) {
        $("#checkbox1").attr("disabled", true);    
        $(".2").show();
    }
    else {
        $("#checkbox1").attr("disabled", false);    
    }
   });
});