JSFiddle - React, Tailwind, and code Playground

by alachgar

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- This jquery.min.js is necessary for popup to Print Modal -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- This For Phone Mask -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

    <!-- This bootstrap.min.css is necessary for the CSS of the app in a whole -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <!-- This bootstrap.js Should always Remain at the end here so it is Last Loaded -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>


    <div class="panel panel-primary setup-content" id="step-2">
      <div class="panel-heading">
        <h3 class="panel-title"> APPLICANT'S INFO</h3>
      </div>

      <div class="panel-body">
        <p>
          <h4 style="color:red;"><b> Please provide Applicant's Contact Information.</b></h4>
        </p>

        <div class="form-group">
          <label class="control-label">Applicant's First Name:</label>
          <input type="text" name="first_name" id="first_name" placeholder="Applicant's First Name" class="form-control" />
        </div>
        <div class="form-group">
          <label class="control-label">Applicant's Last Name:</label>
          <input type="text" name="last_name" id="last_name" placeholder="Applicant's Last Name" class="form-control" />
        </div>
        <div class="form-group">
          <label class="control-label">Age Reported by Applicant:</label>
          <input type="text" name="age" id="age" placeholder="Applicant's Age"...

JavaScript

$(function() {
  $('#income,#household_size,#postal_code,#first_name ,#last_name ,#age ,#phone ,#voice_ok ,#barriers,#address1').change(function() {
    var itemVal = $(this).val();
    if (itemVal != '' && $("#income").val() != "" && $("#household_size").val() != "" && $("#postal_code").val() != "" && $("#first_name").val() != "" && $("#last_name").val() != "" && $("#age").val() != "" && $("#phone").val() != "" && $("#voice_ok").val() != "" && $("#barriers").val() != "" && $("#address1").val() != "") {
      $('#rents, #owns, #unsh').removeAttr('disabled');
    } else {
      $('#rents, #owns, #unsh').attr('disabled', 'disabled');
    }
  });
});