JSFiddle - React, Tailwind, and code Playground

by neerajdotname

HTML

<div>
    <label for="name">Name</label> 
    <input class="required" type="text" name="name" id="name" />
    <span>*</span>
</div>    
    
<div>
  <label for="email">Email</label> 
  <input type="text" name="email" id="email" />
</div>

<div class='student'>
    Student <input type=checkbox name="student" checked> 
</div>
<div class='student-id'>
    <label for="student-id">Student ID </label> 
    <input type="text" name="student-id" id="student-id" />
</div>

CSS

div { margin: 10px;}


.highlight { background: yellow;}

input[disabled='disabled'] {
  background:#ccc;
}

JavaScript

//
// make student checkbox toggle
//
var disableStudentId = function(){
  var $studentId = $('.student-id input');
  $studentId.attr('disabled', true);
  $studentId.parent().find('label').css({color: 'gray'});
};

var enableStudentId = function(){
  var $studentId = $('.student-id input');
  $studentId.removeAttr('disabled');
  $studentId.parent().find('label').css({color: 'black'});
};


$('.student input:checkbox').bind('change', function(){
  var $this = $(this);

    if ($this.is(':checked')) {
        enableStudentId();
    } else {
        disableStudentId();          
    }
});