即使需要输入也显示/隐藏 Div？答案

【问题标题】：Show/Hide Div's even if input is required?即使需要输入也显示/隐藏 Div？
【发布时间】：2016-05-26 15:21:46
【问题描述】：

我有一个表单，其中 div 根据下拉框中的选择显示/隐藏。通过 jquery 使用 .show 和 .hide 可以很好地显示/隐藏字段，但是这些表单上的输入需要是必需的。发生的情况是，当其中一个字段被隐藏时，表单将不会t 提交 - 很可能是因为这个“隐藏”字段仍然需要。

当在下拉列表中选择某个项目时，有没有办法一起禁用/删除此字段而不是隐藏 div？我尝试使用 .attr("disabled", true) 没有运气。任何帮助表示赞赏。

JQuery sn-p:

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

【问题讨论】：

标签： jquery html forms show-hide

【解决方案1】：

您可以在隐藏 required 属性时将其移除。

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

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

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

【讨论】：

我真的很喜欢这个选项，因为它不需要我做太多的改变。字段按应有的方式隐藏/显示，但是在点击提交后，什么也没有发生。
我刚刚注意到 .name 不是输入，而是包含它的 DIV。我已更新答案以查找输入并更改其所需属性。
完美运行！非常感谢！！

【解决方案2】：

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

【讨论】：

感谢您的回复。我对此进行了研究，它确实有效并提交了作品-但是唯一的问题是，如果您再次更改下拉列表的内容，该字段仍将被删除，并且不会“重新添加”输入字段。有什么建议吗？

【解决方案3】：

我刚刚完成了与上述非常相似的工作。如果在提交表单时不需要当前未显示的输入字段，您可以重新编写函数以仅从当前可见的控件中提取值吗？您可以为现有的 div 分配一个不同的类，以找到在 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
}

希望这会有所帮助。

【讨论】：