title: disable an input if another input is clicked
body: <p>I have three sections in a form, the first one contains one input and the second contains three inputs and the third contains a checkbox. How to</p>
  
  <ol>
  <li>disable the two sections if checkbox is checked</li>
  <li>disable the checkbox and a section if I tapped a text in the other section</li>
  <li>enable the three sections if all of them are empty</li>
  </ol>
  
  <p>I must have only one active section everytime. </p>
  
  <p>What I did is not the solution because there is a problem in the second section. if only one input is empty in this section all the other inputs are enabled. any one can help me please.
  Thanks and sorry about my english </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById("client").onblur = function () {
              if (this.value.length &gt; 0) {
                  document.getElementById("FirstName").disabled=true;
                  document.getElementById("LastName").disabled=true;
                  document.getElementById("Email").disabled=true;
                  document.getElementById("standard").disabled=true;
              }else {
                  document.getElementById("FirstName").disabled=false;
                  document.getElementById("LastName").disabled=false;
                  document.getElementById("Email").disabled=false;
                  document.getElementById("standard").disabled=false;
              }
          }
          
          document.getElementById("FirstName").onblur = function () {
              if (this.value.length &gt; 0) {
                  document.getElementById("client").disabled=true; 
                  document.getElementById("standard").disabled=true;
              }else {
                  document.getElementById("client").disabled = false;
                  document.getElementById("standard").disabled = false;
              }
          }
          document.getElementById("LastName").onblur = function () {
              if (this.value.length &gt; 0) {
                  document.getElementById("client").disabled=true; 
                  document.getElementById("standard").disabled=true;
              }else {
                  document.getElementById("client").disabled = false;
                  document.getElementById("standard").disabled = false;
              }
          }
          document.getElementById("Email").onblur = function () {
              if (this.value.length &gt; 0) {
                  document.getElementById("client").disabled=true; 
                  document.getElementById("standard").disabled=true;
              }else {
                  document.getElementById("client").disabled = false;
                  document.getElementById("standard").disabled = false;
              }
          }
          document.getElementById("standard").onblur = function () {
              if (this.checked) {
                  document.getElementById("client").disabled=true; 
                  document.getElementById("FirstName").disabled=true;
                  document.getElementById("LastName").disabled=true;
                  document.getElementById("Email").disabled=true;
              }else {
                  document.getElementById("client").disabled=false; 
                  document.getElementById("FirstName").disabled=false;
                  document.getElementById("LastName").disabled=false;
                  document.getElementById("Email").disabled=false;
              }
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="row"&gt;
   &lt;div class="col-md-4"&gt;
    &lt;div class="row"&gt;
     &lt;div class="form-group col-md-12"&gt;
      &lt;label&gt;Search Client&lt;/label&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
     &lt;div class="form-group col-md-12"&gt;
      &lt;div class="input-group custom-search-form margin-bottom"&gt;
       &lt;input id="client" name="client" type="text" class="form-control input-sm" placeholder="Search..."&gt;
       &lt;span class="input-group-btn"&gt;
        &lt;button class="btn btn-default btn-sm" type="button"&gt;
         &lt;i class="fa fa-search"&gt;&lt;/i&gt;
        &lt;/button&gt;
       &lt;/span&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="col-md-8"&gt;
    &lt;div class="row"&gt;
     &lt;div class="form-group col-md-12"&gt;
      &lt;label&gt;New Client&lt;/label&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
     &lt;div class="form-group col-md-4"&gt;
      &lt;input type="text" class="form-control input-sm" id="FirstName" placeholder="First Name"&gt;
     &lt;/div&gt;
     &lt;div class="form-group col-md-4"&gt;
      &lt;input type="text" class="form-control input-sm" id="LastName" placeholder="Last Name"&gt;
     &lt;/div&gt;
     &lt;div class="form-group col-md-4"&gt;
      &lt;input type="email" class="form-control input-sm" id="Email" placeholder="Email"&gt;
      
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="checkbox margin-bottom"&gt;
   &lt;label&gt;
    &lt;input id="standard" type="checkbox" value=""&gt;Standard
   &lt;/label&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>