入力が必要な場合でもDivを表示/非表示にしますか？

Question

私は、ドロップダウンボックスで何が選択されているかに基づいてdivを表示/非表示にするフォームを持っています。 jqueryで.showと.hideを使用すると、フィールドを表示/非表示にするのに効果的ですが、これらのフォームの入力はにする必要があります。何が起こっているのは、フィールドの1つが非表示になっている場合、フォームは送信されません。

ドロップダウンで特定のアイテムが選択されたときにdivを非表示にする代わりに、このフィールドを一括して無効にしたり削除したりする方法はありますか？私は運がない.attr（ "disabled"、true）を使用しようとしました。どんな助けもありがとうございます。

jQueryのスニペット：

$('#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

非表示にすると、required属性を削除できます。

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

、あなたはそれを表示するとき、それを再度追加：

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

Answer 2

あなたはjQueryの.remove()と試みたことがありますか？ here

Answer 3

を私は上記と非常によく似た何かに取り組んで終了しました。フォームの送信時に現在表示されていない入力フィールドが必要ない場合は、現在表示されているコントロールからのみ値を抽出するように関数を修正できますか？既存のdivに別のクラスを割り当てて、JQueryで表示されているdivを見つけることができます（現在表示されている複数のdivを操作する必要があります）。

ASPX：あなたが使用することができるかもしれそれ以下のサンプルJavaScript関数を参照してください

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

希望。