Show/Hide Divs, auch wenn Eingabe erforderlich ist?

Question

Ich habe ein Formular, in dem divs basierend auf dem, was in einem Dropdown-Feld ausgewählt ist, ein-/ausgeblendet werden. Die Verwendung von .show und .hide via jquery funktioniert hervorragend, um die Felder anzuzeigen/auszublenden, die Eingabe in diese Formulare muss jedoch erforderlich sein. Was passiert, wenn eines der Felder ausgeblendet ist, wird das Formular nicht gesendet - mehr als wahrscheinlich, weil dieses "versteckte" Feld noch benötigt wird.

Gibt es eine Möglichkeit, dieses Feld alle zusammen zu deaktivieren/zu entfernen, anstatt das div zu verstecken, wenn ein bestimmtes Element in der Dropdownliste ausgewählt ist? Ich habe versucht, die .attr ("deaktiviert", wahr) ohne Glück zu verwenden. Jede Hilfe wird geschätzt.

JQuery-Schnipsel:

$('#productpr1').on('change',function() { 

    if(this.value=='PRODUCT1') 
     { 
    $('.initial').show(); 
    $('.name').show(); 
    $('.mono').hide(); 
    $('.comment').show(); 

     } 
    else if (this.value=='PRODUCT2') 
     { 
    $('.initial').hide(); 
    $('.name').hide(); 
    $('.mono').show(); 
    $('.comment').show(); 

     } 
    else if (this.value=='PRODUCT3') 
     { 
    $('.initial').show(); 
    $('.name').show(); 
    $('.mono').show(); 
    $('.comment').show(); 
     } 
    else 
     { 
    $('.initial').show(); 
    $('.name').show(); 
    $('.mono').show(); 
    $('.comment').show(); 
     } 

    }); 

HTML:

<select name="productpr1" id="productpr1"> 
<option value="Please Select:0">Please select your product</option> 
<option value="PRODUCT1">PRODUCT1</option> 
<option value="PRODUCT2">PRODUCT2</option> 
<option value="PRODUCT3">PRODUCT3</option> 
</select> 
<br> 
<br> 

<div class="initial"> 
<div id="Profont"><b>Initial:</b> 
</div> 
<input name="product1[]" type="text" required id="thisone" size="5"> 
</div> 

<div class="name"> 
<div id="Profont"><b>Name:</b> 
<br> 
</div> 
<input name="product1[]" type="text" required id="thisone" size="5"> 
</div> 


<div class="mono"> 
<div id="Profont"><b>Mono Initials:</b> 
<br> 
</div> 
<input name="product1[]" type="text" required id="thisone" size="5"> 
</div> 

<div class="comment"> 
<div id="Profont"><b>Additional Comments:</b> 
<br> 
</div> 
<input type="text" name="product1[]" size="10" id="comments"> 
</div> 

<input type="submit" value="Add to Cart" name="Cart" class="INDVbutton" /> 

Answer 1

Sie können das Attribut required entfernen, wenn Sie es ausblenden.

$('.name').hide().find(':input').attr('required', false); 

und fügen Sie es zurück, wenn Sie es zeigen:

$('.name').show().find(':input').attr('required', true); 

Answer 2

Haben Sie mit jQuerys versucht .remove()? siehe here

Answer 3

Ich habe gerade fertig auf etwas sehr ähnlich wie die oben arbeiten. Wenn die Eingabefelder, die derzeit nicht angezeigt werden, beim Senden des Formulars nicht benötigt werden, können Sie Ihre Funktionen so umarbeiten, dass nur Werte aus den derzeit sichtbaren Steuerelementen extrahiert werden. Sie könnten Ihren vorhandenen div-Dateien eine andere Klasse zuweisen, um die mit JQuery sichtbaren zu finden (sollte auch mit mehreren derzeit sichtbaren divs funktionieren). Siehe Beispiel Javascript-Funktion unterhalb der Sie in der Lage zu verwenden:

ASPX:

<div id="DivWithID1" class="DisplayableDiv"> 
    <asp:TextBox id="textBoxEntry" runat="server"></asp:TextBox> 
</div> 

javascript:

var visibleDivs= $(".DisplayableDiv:visible"); 
// are any divs being shown 
if (visibleDivs.length !== 0) 
{ 
    // loop through all visible divs 
    for(i = 0; i < visibleDivs.length; ++i) 
    { 
     switch(visibleDivs[i].id) { 
      // assign each div an ID which you can extract here 
      case 'DivWithID1': 
      // extract the values inside each input text box (can also replace with your controls) 
      $(visibleDivs[i]).find("input[type=text]").each(function() { 
       var value = $(this).val(); 
      } 
      break; 
      ... add more cases here 
     } 
    } 
    // ... continue with post functionality 
} 

Hoffnung, das hilft.