JSFiddle - React, Tailwind, and code Playground

by techiedelight

HTML

<div id="container">
  <label for="name">Enter your name:</label>
  <input type="text" id="name" name="name">
</div>
<button id="submit">Enable/Disable</button>

CSS

label {
  font: 15px 'Exo 2', sans-serif;
}

input {
  margin: 6px;
}

button {
  margin-top: 10px;
  padding: 3px;
  font: 15px 'Exo 2', sans-serif;
}

JavaScript

$(document).ready(function() {
  $('#submit').click(function() {
    var disabled = $("#name").prop('disabled');
    if (disabled) {
      $("#name").prop('disabled', false);		// if disabled, enable
    } else {
      $("#name").prop('disabled', true);		// if enabled, disable
    }
  })
});