JSFiddle - React, Tailwind, and code Playground

by Vinit Divekar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="form-group">
        <div class="checkbox">
            <label>
                <input type="checkbox" asp-for="IsPaid" id="ispaid" />
            </label>
        </div>
    </div>
    <div class="form-group" id="crsfees">
        <label asp-for="CourseFees" class="control-label"></label>
        <input value="0.00" palceholder="0.00" asp-for="CourseFees" class="form-control" />
        <span asp-validation-for="CourseFees" class="text-danger"></span>
    </div>

CSS

.hidden {
  display: none;
}

JavaScript

$(document).ready(function() {
  $('#IsPaid').change(function() {
  if (!Boolean(parseInt(selected))) {
       $("#crsfees").val() = '0.00';
   }

})