如何根据下拉值禁用/启用表单

Question

I have two forms on the same page. I want to enable/disable a form element based on the drop down value selected on the first form.

On the first drop down When option 1 selected or <option value="">Select</option> I want to disable the second dropdown from the first form or <select name="tractor" ..> and everything on 2nd Form form.

if from <select name="tire"> : Rear Tire or Front Tire selected but Nothing selected in the second dropdown i want to enable <select name="tractor"> and keep 2nd Form disable.

1st Form

<form method="post">
<select name="tire">
    <option  value="">Select</option>
    <option  value="rear">Rear Tire</option>
    <option  value="front">Front Tire</option>
</select> 
 <select name="tractor">
    <option value="">select Type</option>
    <option value="2wd">2WD</option>
    <option value="mfwd">MFWD</option>
    <option value="4wd">4WD</option>
 </select>
 <input type="submit" value="Go" name="cmd_submit" />

2nd Form // want to be disabled when page loads

 <form method="post" id="vehicle" action="page.php">
      .
      .
      .
 </form>

Answer 1

Simply check the value of the first dropdown. I added some classes to the dropdowns first and second :

<h3> First form </h3>
<form method="post" class="firstform">
  <select name="tire" class="first">
    <option  value="">Select</option>
    <option  value="rear">Rear Tire</option>
    <option  value="front">Front Tire</option>
  </select> 
  <select name="tractor" class="second" disabled>
    <option value="">select Type</option>
    <option value="2wd">2WD</option>
    <option value="mfwd">MFWD</option>
    <option value="4wd">4WD</option>
  </select>
  <input type="submit" value="Go" name="cmd_submit" />
</form>

<h3> Second form </h3>
<form method="post" id="vehicle" action="page.php" class="secondform">
   <label>A form with no fields is useless: </label>
   <input type="text" placeholder="so here a field" class="secondformfield" />  <br />
   <label>This is a dropdown: </label>
   <select name="tractor" class="secondformfield">
    <option value="">...</option>
    <option value="2wd">With an option</option>
    <option value="mfwd">And another option</option>
   </select>  <br />
   <textarea class="secondformfield">some text</textarea>
   <input type="button" value="And away!" name="cmd_away" class="secondformfield"/> 
</form>

And the Js

$(document).ready(function(){
    $(".secondform .secondformfield").prop("disabled",true);

    $(".first").change(function(){
      if($(this).val() !== ""){
        $(".second").prop("disabled",false);
      }
      else{
        $(".second").prop("disabled",true);
      }

      checkIfEverythingIsFilledIn();
    });

    $(".second").change(function(){
      checkIfEverythingIsFilledIn();
    });

    function checkIfEverythingIsFilledIn(){
      if($(".first").val() !== "" && $(".second").val() !== ""){
        $(".secondform .secondformfield").prop("disabled",false);
        $(".secondform").attr("method","post").attr("action","page.php");
      }
      else{
        $(".secondform .secondformfield").prop("disabled",true);
        $(".secondform").removeAttr("method").removeAttr("action");
      }
    }
});

For preventing the submit of the form there are multiple solutions. The submitbutton will be disabled automatically because it is also of type input . Another option is to remove/add the attributes of the form like I did above and in a JsFiddle

Edit: Updated js code by a good advise of @WorldFS