title: JavaScript code is not working
body: <p>Im trying to control the functionality for the drop down menus, the rules are</p>
  
  <ul>
  <li>Both boxes cannot be ticked at the same time </li>
  <li>When one box is selected only then should the drop down be editable otherwise it should be read only </li>
  <li>The drop down should become read only when no is ticked </li>
  <li>When one box is ticked the drop down should become editable (does not matter which box is ticked)</li>
  </ul>
  
  <p>The problem is when I tick a box it becomes editable but then when I select the second box it becomes disabled, the drop
  down should always be editable as long as a box is ticked as soon as a box is unticked (both boxes must be unticked) only
  then should the drop down menu be disabled</p>
  
  <pre><code>    &lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"&gt;
  function myFunction() {
     if (document.getElementById("1").disabled == false) {
              document.getElementById("10").disabled = true;
              //set default 
              document.getElementById("10").value = "OptionOne" 
              //first drop down 
              document.getElementById("1").disabled = true;
              //set default
              document.getElementById("1").value = "ReasonOne"    
          } else {
              document.getElementById("1").disabled = false;
          }
  
  }
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  var previousCheckId;
  
       function toggle(chkBox) {
           if (chkBox.checked) {
                if (previousCheckId) {
                     document.getElementById(previousCheckId).checked = false;
                }
                previousCheckId = chkBox.getAttribute('id');
           }
       }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;input type="checkbox" id="chkBox100" onClick="myFunction();toggle(this);"/&gt;
      &lt;input type="checkbox" id="chkBox121" onClick="myFunction();toggle(this);"/&gt;
      &lt;select  disabled id="1"  &gt;
                  &lt;option value="OptionOne"&gt;First Option&lt;/option&gt;
                  &lt;option value="OptionTwo"&gt;Second Option&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;select  disabled id="10"  &gt;
                  &lt;option value="ReasonOne"&gt;First Option&lt;/option&gt;
                  &lt;option value="ReasonTwo"&gt;SecondOption&lt;/option&gt;
      &lt;/select&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>