Açılır pencereye göre formu nasıl devre dışı bırakabilirim/etkinleştirebilirim

Question

Aynı sayfada iki formum var. İlk formda seçilen açılır menüye dayalı olarak bir form öğesini etkinleştirmek/devre dışı bırakmak istiyorum. seçenek 1 Seçilen aşağı ilk damla üzerinde

veya <option value="">Select</option> Ben ilk form veya <select name="tractor" ..> ve 2 Form formu üzerinde her şey ikinci açılan devre dışı bırakmak istediğiniz.

eğer <select name="tire"> den: Rear Tire veya Front Tire seçilmiş ama hiçbir şey ı <select name="tractor"> etkinleştirmek ve 2 Form disable tutmak istiyorum İkinci açılır seçilen.

1 Formu

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

2 Form // sayfa yüklendiğinde

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

Answer 1

Basitçe İlk açılır değerini kontrol ederken devre dışı etmek istiyorum.

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

Ve birden çözüm bulunmaktadır formun teslim önlenmesi için 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"); 
     } 
    } 
}); 

: Ben Dropdowns first ve second bazı sınıfları ekledi. Gönderme, otomatik olarak input türünde olduğu için devre dışı bırakılacaktır. Başka bir seçenek/kaldır ben and in a JsFiddle

Edit yukarıda yaptığımız gibi formun özelliklerini eklemektir:. JQuery doc göre @WorldFS