JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-8 col-sm-6 offset-sm-1 col-xl-4 offset-xl-1 pr-0" align="left">
<p><input type="checkbox" name="nameGroupPlanPercent" value="changedescr"/></p>
 </div>
 <div>
<p>
<input name="nameGroupPlanPercentText" disabled />
</p>
</div>


<p>
<div class="col-8 col-sm-6 offset-sm-1 col-xl-4 offset-xl-1 pr-0" align="left">
<input type="checkbox" name="nameGroupPlanPercent" value="changedescr"/>
<input name="nameGroupPlanPercentText" disabled/>
<div>
</p>

</div>
<div class="col-8 col-sm-6 offset-sm-1 col-xl-4 offset-xl-1 pr-0" align="left">
  <input  id="@strGroupPlanPercentID" name="nameGroupPlanPercent" type="checkbox" value="@item.planIDField" /> 
</div>

<div class="col-3 col-xl-2 px-0">
  <input id="@txtstrGroupPlanPercentID" name="nameGroupPlanPercentText" disabled type="text">
</div>

JavaScript

$('input[name="nameGroupPlanPercentText"]').attr("disabled", true);
$('input[name="nameGroupPlanPercent"]').click(function () {
		if(this.checked){
    	$('input[name="nameGroupPlanPercentText"]').attr("disabled", false);
    }
    else{
    	$('input[name="nameGroupPlanPercentText"]').attr("disabled", true);
    }
})