Question

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

在第一个下拉列表中选择选项1或<option value="">Select</option>我要禁用第一个表单中的第二个下拉列表或<select name="tractor" ..>以及第二个表单表单中的所有内容。< / p>

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

上面所做的那样

编辑：通过@WorldFS

的良好建议更新了js代码

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

1 个答案: