如何根據下拉值禁用/啟用表單

Question

我在同一頁面上有兩種形式。 我想基於在第一個表單上選擇的下拉值來啟用/禁用表單元素。

在第一個下拉菜單中選擇選項1或<option value="">Select</option>我想從第一個表單或<select name="tractor" ..>以及第二個表單表單中的所有內容禁用第二個下拉列表。

如果來自<select name="tire"> ： <select name="tire"> Rear Tire或“ Front Tire但在第二個下拉列表中未選擇任何內容，我想啟用<select name="tractor">並保持“ 第二個表單”禁用。

第一種形式

<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" />

第二種形式 //要在頁面加載時被禁用

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

Answer 1

只需檢查第一個下拉菜單的值即可。 我在下拉菜單的first和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>

和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");
      }
    }
});

為了防止提交表格，有多種解決方案。 提交按鈕也將被自動禁用，因為它也是input類型。 另一個選擇是像上面和在JsFiddle中一樣刪除/添加表單的屬性

編輯：通過@WorldFS的一個很好的建議更新了js代碼