Show/Hide Div的即使需要输入？

Question

我有一个表单，其中 div 是 shown/hidden 基于在下拉框中选择的内容。通过 jquery 使用 .show 和 .hide 对 show/hide 字段非常有用，但是这些表单上的输入需要 required。 发生的事情是字段被隐藏，表单不会提交 - 很可能是因为此 "hidden" 字段仍然需要。

有没有办法在下拉列表中选择某个项目时将 disable/remove 这个字段全部放在一起，而不是隐藏 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

您尝试过 Jquery 的 .remove() 吗？见 here

Answer 2

您可以在隐藏时删除 required 属性。

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

并在显示时将其添加回来：

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

Answer 3

我刚刚完成了与上述非常相似的工作。如果提交表单时不需要当前未显示的输入字段，您可以重新设计您的函数以仅从当前可见的控件中提取值吗？您可以为现有的 div 分配一个不同的 class 以找到使用 JQuery 可见的那个（也应该与当前可见的多个 div 一起使用）。请参阅下面的示例 Javascript 函数，您可以使用它：

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
}

希望对您有所帮助。

Show/Hide Div的即使需要输入？

Show/Hide Div's even if input is required?

html

forms

jquery

show-hide