title: Simultaneous div show/hide and enable/disable on checkbox check/uncheck using Javascript/jQuery
body: <p>I have the following view:</p>
  
  <pre><code>&lt;div&gt;
      &lt;label id = "show_hide_checkbox_label"&gt;Text Input?&lt;/label&gt;
      &lt;input type ="checkbox" class="myCheckbox" onchange="show_hide_divs()" /&gt;
  &lt;/div&gt;
  &lt;div id="text_div" hidden&gt;
      &lt;label id ="emp_id_input_label"&gt;Employee ID:&lt;/label&gt;
      &lt;input type="text" name="emp_id" id="employee_id_input"&gt;&lt;/input&gt;
  &lt;/div&gt;
  &lt;div id="select_div"&gt;
       &lt;label id= "emp_id_add_label"&gt;Employee ID:&lt;/label&gt;
       &lt;select name="emp_id" id = "employee_id"&gt;
       &lt;option&gt;--Select--&lt;/option&gt;
       &lt;option&gt;INCB001&lt;/option&gt;
       &lt;option&gt;INCB002&lt;/option&gt;
       &lt;option&gt;INCB003&lt;/option&gt;
       &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I want to do is this: </p>
  
  <p>By default, the checkbox is unchecked, the textbox is hidden and disabled and the select element is visible, and I can only post data from the options in the select element, I can not post data from textbox. But if I check the checkbox, then select element becomes hidden and disabled, and the textbox is visible and enabled, and I can only post data from textbox and not from the select element. If I uncheck the checkbox again, the behavior is reversed and so on.</p>
  
  <p>Unfortunately, the jQuery code I have below doesn't allow me to disable/enable and show/hide the divs properly on checkbox change.</p>
  
  <p>Here's my jQuery code:</p>
  
  <pre><code>    &lt;script&gt;
          function show_hide_divs()
          {
                  if ($('.myCheckbox').is(':checked'))
                  {
                      $("div#text_div").show();
                      $("div#text_div").children().prop('disabled', 'false');
                      $("div#select_div").hide();
                      $("div#select_div").children().prop('disabled', 'true');
                  }
                  else {
                       $("div#select_div").show();
                       $("div#select_div").children().prop('disabled', 'false');
                       $("div#text_div").hide();
                       $("div#text_div").children().prop('disabled', 'true');
                  }
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>It seems there's something wrong with my jQuery code, only just I can't figure out myself.</p>