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

Question

我在同一页面上有两个表单。我想根据第一个表单上选择的下拉值启用/禁用表单元素。

在第一个下拉下降时选项1选项1或<option value="">Select</option>我想从第一个表单或<select name="tractor" ..>和 2nd形式表单上的所有内容禁用第二个下拉目。

如果来自 <select name="tire">：Rear Tire 或 Front Tire 已选择，但在第二个下拉列表中未选择任何内容，我想启用 <select name="tractor"> 并保持 2nd 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 // 希望在页面加载时禁用

 <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 类型。另一种选择是删除/添加表单的属性，就像我在上面所做的 and in a JsFiddle

编辑：通过@WorldFS 的好建议更新了 js 代码