JSFiddle - React, Tailwind, and code Playground

by Lucas Trzesniewski

HTML

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="isCompany" class="col-sm-2 control-label">It's a company</label>
    <div class="col-sm-10">
        <input type="checkbox" id="inlineCheckbox1" value="option1"/> 
    </div>
  </div>
  <div class="form-group" id="CompanyName">
        <label for="companyName" class="col-sm-2 control-label">Company Name</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="companyName" placeholder="Company"/>
        </div>
  </div>
  <div class="form-group">
      <label for="AdresseName" class="col-sm-2 control-label" id="AdresseNameNotCompnay">Name</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="AdresseName" placeholder="Name"/>
        </div>
  </div>    
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Save</button>
    </div>
  </div>
</form>

JavaScript

$(document).ready(function(){
    $('#CompanyName').hide();    
    $('#inlineCheckbox1').click(function() {
        var $this = $(this);
        // $this will contain a reference to the checkbox   
        if ($this.is(':checked')) {
            $('#CompanyName').show();
            $("label[for='AdresseName']").text('Adresse Name');
        } else {
            $('#CompanyName').hide();
            $("label[for='AdresseName']").text('Name');
        }
    });
});