Question

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

有没有办法一起禁用/删除此字段，而不是在下拉列表中选择某个项目时隐藏div？我试图使用.attr（“禁用”，真实）而没有运气。任何帮助表示赞赏。

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一起使用）。请参阅下面的示例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
}

希望这有帮助。

即使需要输入，显示/隐藏Div？

3 个答案: