JSFiddle - React, Tailwind, and code Playground

HTML

<form id="newPlayer">
  <h3>Username:</h3>
  <input type="text" name="user" />
  <br>
  <h3>Please Choose a Class:</h3>
  <input type="radio" name="class" value="archer" />Archer
  <input type="radio" name="class" value="mage" />Mage
  <input type="radio" name="class" value="warrior" />Warrior
  <br>
  <h3>Please Choose a Race:</h3>
  <input type="radio" name="race" value="Orc" />Orc
  <input type="radio" name="race" value="Elf" />Elf
  <input type="radio" name="race" value="Human" />Human
  <input type="radio" name="race" value="Worg" />Worg
  <br>
  <input type="submit" value="Submit" />
  <p id="descript"></p>
</form>

CSS

#newPlayer {
  position: relative;
  top: 20px;
  color: #8b0909;
  background-color: rgba(0, 0, 0, .3);
  width: 350px;
  margin: auto;
  height: 275px;
  border-radius: 5px;
  text-shadow: 1px 1px 1px black;
}

#newPlayer h3 {
  font-size: 20px;
  font-family: 'Droid Sans', sans-serif;
  font-weight: 700;
  padding-bottom: 5px;
}

#newPlayer p {
  max-width: 275px;
  margin: auto;
  margin-top: 5px;
  color: #c10606;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}

#newPlayer input[type=submit] {
  color: black;
  border-radius: 5px;
  font-family: 'Droid Sans', sans-serif;
}

JavaScript

if (($('input[type=text]').val() === '') || (!($('input[name=class]').is(':checked'))) || (!($('input[name=race]').is(':checked')))) {
  $(' input[type=submit]').css('pointer-events', 'none');
} else {
  $(' input[type=submit]').css('pointer-events', 'auto');
}

$('input[name=user]', 'input[name=race]', 'input[name=class]').change(function() {
  if (($('input[type=text]').val() === '') || (!($('input[name=class]').is(':checked'))) || (!($('input[name=race]').is(':checked')))) {
    $(' input[type=submit]').css('pointer-events', 'none');
  } else {
    $(' input[type=submit]').css('pointer-events', 'auto');
  }
});