Form manipulation

HTML

<form>
  <table>
    <tr>
      <td>First name:</td>
      <td>
        <input type="text" name="firstname">
      </td>
    </tr>
    <tr>
      <td>Last name:</td>
      <td>
        <input type="text" name="lastname">
      </td>
    </tr>
    <tr>
      <td>Essay:</td>
      <td>
        <textarea rows="4" cols=""></textarea>
      </td>
    </tr>
    <tr>
      <td>Gender:</td>
      <td>
        <div class='gender'>
          <input type="radio" name="gender" value="male"> Male</div>
        <div class='gender'>
          <input type="radio" name="gender" value="female"> Female</div>
      </td>
    </tr>
    <tr>
      <td>Age:</td>
      <td>
        <input type="number" name="age" min="18" max="99">
      </td>
    </tr>
  </table>
  <input class='validateCheck' type="button" value="Validate" />
</form>

CSS

table {
  border-collapse: collapse;
}

td {
  vertical-align: top;
  border: solid 1px #ACE;
  padding: 2px;
  font-family: arial;
}

input {
  width: 450px;
  text-align: center;
}

textarea {
  margin: 0;
  width: 448px;
  text-align: left;
}

input[type="radio"] {
  width: 15px;
}

div.gender {
  display: inline-block;
  clear: none;
  width: 219px;
}

.disabled {
  background-color: #f1f1f1;
}

input[type="button"] {
  width: 546px;
  margin-top: 5px;
  color: #FFF;
  background-color: red;
  border: solid 1px #ACE;
}

JavaScript

//StackOverflow Question - http://stackoverflow.com/q/37618826/5076162 [06-03-2016]

//Step 1: Declare the collection of all inputs that should be manipulated.
var $inputFields = $('textarea, input[type="text"], input[type="number"], input[type="radio"]');

//Step 2: Insert the collection into a single array using the .push() method.
var arr = [];

$inputFields.each(function() {
  arr.push($(this));
});

//Step 3: Iterate through the newly created array and perform certain functions.
//Source - http://stackoverflow.com/a/5437904/5076162
$.each(arr, function(i) {
  if (i > 0) {
    $(this).attr('readonly', 'readonly').addClass('disabled');
    $(':radio[readonly]:not(:checked)').attr('disabled', true);
    //console.log("Iteration number: " + i);
  }
});

var $justRadio = $('input[type="radio"]:disabled');

//Step 4: Detect input and apply logic for each situation.  Note that different input types require different syntax.
$inputFields.on("propertychange input change focus blur", function(i) {
  var index = $inputFields.index(this);
  var next = $inputFields.eq(index + 1);
  var $checkedRadio = $('input[type="radio"]:checked').length;
  var radioCounter = $justRadio.length;

  if ($(this).val() === "") {
    $inputFields.filter(function() {
      return $inputFields.index(this) > index;
    }).attr("readonly", true).attr('disabled', true).addClass('disabled');
    //console.log('disable Fired');
  } else {
    next.attr("readonly", false).attr('disabled', false).removeClass('disabled');
    $justRadio = $('input[type="radio"]:disabled');
    //console.log(radioCounter);
    if (radioCounter < 2) {
      $justRadio.closest('tr').find($justRadio).attr("readonly", false).attr('disabled', false).removeClass('disabled');
    }
  }
  if ($checkedRadio > 0 && $justRadio.length === 0) {
    $inputFields.last().attr("readonly", false).attr('disabled', false).removeClass('disabled');
    //console.log("This fired: lastRow");
  }

  //Step 5: Implement a user interface...