Deaktivieren Sie erforderliche Tag in versteckten divs

Question

Mein Kontaktformular haben einige div-Felder, die mit einer Dropdown-Liste ausblenden oder anzeigen. Ich verwendete erforderlich Tag in diesem divs. Das Problem ist, wenn einer dieser erforderlichen Tags in einem versteckten div ist, kann ich das Formular nicht einreichen. Was kann ich tun?

$(document).ready(function() { 
 
    $("#Color").change(function() { 
 
    $(this).find("option:selected").each(function() { 
 
     if ($(this).attr("value") == "redd") { 
 
     $(".box").not(".redd").hide(); 
 
     $(".redd").show(); 
 
     } else if ($(this).attr("value") == "greenn") { 
 
     $(".box").not(".greenn").hide(); 
 
     $(".greenn").show(); 
 
     } else { 
 
     $(".box").hide(); 
 
     } 
 
    }); 
 
    }).change(); 
 

 
    $("#ddColor").change(function() { 
 
    $(this).find("option:selected").each(function() { 
 
     if ($(this).attr("value") == "red") { 
 
     $(".inner-box").not(".red").hide(); 
 
     $(".red").show(); 
 
     } else if ($(this).attr("value") == "green") { 
 
     $(".inner-box").not(".green").hide(); 
 
     $(".green").show(); 
 
     } else { 
 
     $(".inner-box").hide(); 
 
     } 
 
    }); 
 
    }).change(); 
 
});

.inner-box { 
 
    border: 2px solid; 
 
    height: 30px; 
 
    background-color: yellow; 
 
} 
 
.green { 
 
    background-color: green; 
 
} 
 
.red { 
 
    background-color: red; 
 
}

<div> 
 
    <fieldset> 
 
    <p dir="rtl"> 
 
     <label>case1</label> 
 
     <select id="Color" required="required"> 
 
     <option>please select</option> 
 
     <option value="redd">home 
 
      <option> 
 
      <option value="greenn">laptop</option> 
 
     </select> 
 
    </p> 
 
    </fieldset> 
 
</div> 
 
<div class="redd box"> 
 
    <div> 
 
    <fieldset> 
 
     <p dir="rtl"> 
 
     <label>case2</label> 
 
     <select id="ddColor" required="required"> 
 
      <option>please select</option> 
 
      <option value="red">sell 
 
      <option> 
 
       <option value="green">rent</option> 
 
     </select> 
 
     </p> 
 
    </fieldset> 
 
    </div> 
 
    <div class="red inner-box"> 
 
    <input dir="rtl" type="text" name="pricerange" required /> 
 
    </div> 
 
    <div class="green inner-box"> 
 
    <input dir="rtl" type="text" name="rentrange" required/> 
 
    </div> 
 

 
</div> 
 
<div class="greenn box"> 
 
    <input dir="rtl" type="text" name="ramrange" required/> 
 
</div>

Answer 1

Sie werden required-false auf sie setzen müssen, wenn versteckt, und wieder true wenn zeigt. Wenn alle der inputs in dieser divs erforderlich sind, wenn es zeigt einfach:

mit Ihrem .redd div als Beispiel:

Hiding:

$(".redd").hide().find("input").prop("required", false); 

Angezeigt:

$(".redd").show().find("input").prop("required", true); 

Wenn nur einige von ihnen sind erforderlich, Sie ' wollen ll ihre alte Einstellung erinnern und dann erneut bewerben es:

Hiding:

$(".redd").hide().find("input").each(function() { 
    var $input = $(this); 
    $input.data("was-required", $input.prop("required")); 
    $input("required", false); 
}); 

Angezeigt:

$(".redd").show().find("input").each(function() { 
    var $input = $(this); 
    $input.prop("required", $input.data("was-required")); 
}); 

Wenn Sie mit einigen in der Auszeichnungs versteckt beginnen, werden Sie dies tun wollen, bevor eine der show Aktionen auf, dass:

$("input").each(function() { 
    $(this).data("was-required", this.required); 
}); 

... INITIALIZ e die Flagge. Wenn sie alle anfangen zu zeigen, brauchen Sie das nicht, weil die "Verstecken" -Aktion oben ist.

Answer 2

entfernen attr Sie verwenden können:

$('#id').removeAttr('required');​​​​​