title: Other radio buttons not clickable after using Javascript function to select certain Radio based on if statement
body: <p>I am working on a car service reservation system and there are three different vehicle options. I am trying to code it to where if there are a certain number of passengers listed, the vehicle automatically switches to something that accommodates more people and disables the first vehicle.</p>
  
  <p>I have accomplished this but there are problems. I'm using arrays and functions to define the amount of passengers. I am then using a variable that adds the values these functions spit out to create a total number of passengers. Then I have set up an if statement to say if the value is greater than four, change to this radio input and disable the first one.</p>
  
  <p>The problem occurs when this happens I am no longer able to select the third vehicle option and I don't know why.</p>
  
  <p>I also attempted to set the total passenger value to where if it is less than five, the first vehicle is automatically selected. This did not work either.</p>
  
  <p>Ultimately I would like it to act in such a way that if over 14 passengers are selected, the user receives an error (this is working fine). If less than 5 passengers are selected, the first vehicle is selected. If over 4 passengers are selected, the second vehicle is selected and the third is still an option. If more than 8 passengers are selected, both the first and third vehicle are disabled.</p>
  
  <p>Hopefully my code is not overly ill formatted. I am fairly new to Javascript and have been piecing tutorials together. Here is a <a href="http://jsfiddle.net/cthbg27h/6/" rel="nofollow">jsfiddle</a> of the part of the form that is not working.</p>
  
  <p>Here is the Javascript code:</p>
  
  <pre><code>var adults_teenagers2 = new Array();
  adults_teenagers2["1"] = 1;
  adults_teenagers2["2"] = 2;
  adults_teenagers2["3"] = 3;
  adults_teenagers2["4"] = 4;
  adults_teenagers2["5"] = 5;
  adults_teenagers2["6"] = 6;
  adults_teenagers2["7"] = 7;
  adults_teenagers2["8"] = 8;
  adults_teenagers2["9"] = 9;
  adults_teenagers2["10"] = 10;
  adults_teenagers2["11"] = 11;
  adults_teenagers2["12"] = 12;
  adults_teenagers2["13"] = 13;
  adults_teenagers2["14"] = 14;
  
  function AmountAdultsTeenagers() {
  var AdultsTeenagersNumberAmount = 0;
  var theForm = document.forms["resForm"];
  var AdultsTeenagersNumber = theForm.elements["adults_teenagers"];
  AdultsTeenagersNumberAmount = adults_teenagers2[AdultsTeenagersNumber.value];
  return AdultsTeenagersNumberAmount;
  }
  
  var children2 = new Array();
  children2["0"] = 0;
  children2["1"] = 1;
  children2["2"] = 2;
  children2["3"] = 3;
  children2["4"] = 4;
  children2["5"] = 5;
  children2["6"] = 6;
  children2["7"] = 7;
  children2["8"] = 8;
  
  function Amountchildren() {
  var childrenNumberAmount = 0;
  var theForm = document.forms["resForm"];
  var childrenNumber = theForm.elements["children"];
  childrenNumberAmount = children2[childrenNumber.value];
  return childrenNumberAmount;
  }
  
  var infants2 = new Array();
  infants2["0"] = 0;
  infants2["1"] = 1;
  infants2["2"] = 2;
  infants2["3"] = 3;
  infants2["4"] = 4;
  infants2["5"] = 5;
  infants2["6"] = 6;
  infants2["7"] = 7;
  infants2["8"] = 8;
  
  function Amountinfants() {
  var infantsNumberAmount = 0;
  var theForm = document.forms["resForm"];
  var infantsNumber = theForm.elements["infants"];
  infantsNumberAmount = infants2[infantsNumber.value];
  return infantsNumberAmount;
  }
  
  function calculateTotal() {
  var over = AmountAdultsTeenagers() + Amountchildren() + Amountinfants();
  if(over&gt;'14')
  {
  alert('Sorry, no vehicle can accomodate more than 14 passengers.');
  document.getElementById("firstPageSubmit").disabled = true;
  
  }
  else {
  document.getElementById("firstPageSubmit").disabled = false;
  }
  if(over&lt;'5') {
  document.getElementById("towncar").checked = true;
  }
  if(over&gt;'4')
  {
  document.getElementById("towncar").disabled = true;
  document.getElementById("stretch_limousine").disabled = false;
  document.getElementById("passenger_van").checked = true;
  }
  else {document.getElementById("towncar").disabled = false;
  }
  }
  </code></pre>
  
  <p>and the HTML:</p>
  
  <pre><code>&lt;form method="post" class="res_form" id="resForm" name="res_form" onSubmit="return quoteCheck();"&gt;
  &lt;ul&gt;
      &lt;li id="steps"&gt;Step 1 of 3 - Select Type of Service/Get Quote&lt;/li&gt;
      &lt;li class="form_notice"&gt;&lt;span&gt;Reservations must be at least 48 hrs prior for towncars and 72 hrs for any other vehicle.&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;fieldset class="res_form_fs" id="passengers"&gt;
      &lt;legend&gt;Passengers:&lt;/legend&gt;
  &lt;label for="adults_teenagers" class="selectLabel"&gt;Adults/Teenagers:
          &lt;select name="adults_teenagers" id="adults_teenagers" onchange="calculateTotal()"&gt;
              &lt;option value="1"&gt;1&lt;/option&gt;
              &lt;option value="2"&gt;2&lt;/option&gt;
              &lt;option value="3"&gt;3&lt;/option&gt;
              &lt;option value="4"&gt;4&lt;/option&gt;
              &lt;option value="5"&gt;5&lt;/option&gt;
              &lt;option value="6"&gt;6&lt;/option&gt;
              &lt;option value="7"&gt;7&lt;/option&gt;
              &lt;option value="8"&gt;8&lt;/option&gt;
              &lt;option value="9"&gt;9&lt;/option&gt;
              &lt;option value="10"&gt;10&lt;/option&gt;
              &lt;option value="11"&gt;11&lt;/option&gt;
              &lt;option value="12"&gt;12&lt;/option&gt;
              &lt;option value="13"&gt;13&lt;/option&gt;
              &lt;option value="14"&gt;14&lt;/option&gt;
          &lt;/select&gt;&lt;/label&gt;
  &lt;label for="children" class="selectLabel"&gt;Children:
          &lt;select name="children" id="children" onchange="calculateTotal()"&gt;
              &lt;option value="0"&gt;None&lt;/option&gt;
              &lt;option value="1"&gt;1&lt;/option&gt;
              &lt;option value="2"&gt;2&lt;/option&gt;
              &lt;option value="3"&gt;3&lt;/option&gt;
              &lt;option value="4"&gt;4&lt;/option&gt;
              &lt;option value="5"&gt;5&lt;/option&gt;
              &lt;option value="6"&gt;6&lt;/option&gt;
              &lt;option value="7"&gt;7&lt;/option&gt;
              &lt;option value="8"&gt;8&lt;/option&gt;
          &lt;/select&gt;&lt;/label&gt;
  &lt;label for="infants" class="selectLabel"&gt;Infants:
          &lt;select name="infants" id="infants" onchange="calculateTotal()"&gt;
              &lt;option value="0"&gt;None&lt;/option&gt;
              &lt;option value="1"&gt;1&lt;/option&gt;
              &lt;option value="2"&gt;2&lt;/option&gt;
              &lt;option value="3"&gt;3&lt;/option&gt;
              &lt;option value="4"&gt;4&lt;/option&gt;
              &lt;option value="5"&gt;5&lt;/option&gt;
              &lt;option value="6"&gt;6&lt;/option&gt;
              &lt;option value="7"&gt;7&lt;/option&gt;
              &lt;option value="8"&gt;8&lt;/option&gt;
          &lt;/select&gt;&lt;/label&gt;
      &lt;/fieldset&gt;
      &lt;/li&gt;
      &lt;li&gt;
      &lt;fieldset class="res_form_fs"&gt;
      &lt;legend&gt;Select Vehicle:&lt;/legend&gt;
          &lt;p class="radioT"&gt;&lt;input type="radio" value="Towncar" onclick="calculateTotal()" name="vehicle" id="towncar" class="radio" unchecked /&gt;&lt;/p&gt;&lt;p class="nonradioT"&gt;&lt;span class="radioOption"&gt;&lt;label for="towncar"&gt;Towncar&lt;/label&gt;&lt;/span&gt;&lt;/p&gt;&lt;br /&gt;
          &lt;p class="radioT"&gt;&lt;input type="radio" value="Passenger Van" onclick="calculateTotal()" name="vehicle" id="passenger_van" class="radio" unchecked /&gt;&lt;/p&gt;&lt;p class="nonradioT"&gt;&lt;span class="radioOption"&gt;&lt;label for="passenger_van"&gt;Passenger Van&lt;/label&gt;&lt;/span&gt;&lt;/p&gt;&lt;br /&gt;
          &lt;p class="radioT"&gt;&lt;input type="radio" value="Stretch Limousine" onclick="calculateTotal()" name="vehicle" id="stretch_limousine" class="radio" unchecked /&gt;&lt;/p&gt;&lt;p class="nonradioT"&gt;&lt;span class="radioOption"&gt;&lt;label for="stretch_limousine"&gt;Stretch Limousine&lt;/label&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;/fieldset&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;input name="submit" type="submit" id="firstPageSubmit" class="ressubmitButton" value="Continue to Make Reservation" /&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/form&gt;
  </code></pre>