中隐藏的div

Question

必要和可选的输入我有一个接触的形式这样

<form action="" method="POST"> 
 
<div> 
 
    <fieldset> 
 
    <p dir="rtl"> 
 
     <label>case1</label> 
 
     <select id="Color" required="required"> 
 
     <option value="">please select</option> 
 
     <option value="redd">sell</option> 
 
     <option value="greenn">rent</option> 
 
     </select> 
 
    </p> 
 
    </fieldset> 
 
</div> 
 
<div class="redd box"> 
 
    <input dir="rtl" type="text" name="pricerange" required /> 
 
    <input dir="rtl" type="text" name="room" /> 
 
</div> 
 
<div class="greenn box"> 
 
    <input dir="rtl" type="text" name="rentrange" required /> 
 
    <input dir="rtl" type="text" name="morgage" /> 
 
</div> 
 
<p dir="rtl"><input name="submit" type="submit" value="submit" /></p> 
 
</form>

正如你看到的我显示或隐藏2格箱“REDD箱”和“greenn箱”基于用户在表单的开头从下拉列表中选择的值。正如你所看到的，我在这个div盒里需要输入和可选的输入。但是当我选择其中一个div时，我必须填写必填字段和可选字段，否则我无法提交我的表单。任何想法？谢谢

$(document).ready(function(){ 
 
    $("#Color").change(function() { 
 
     $(this).find("option:selected").each(function(){ 
 
      if($(this).attr("value")=="redd"){ 
 
       $(".box").not(".redd").hide().find("input").prop("required", false); 
 
       $(".redd").show().find("input").prop("required", true); 
 
      } 
 
      else if($(this).attr("value")=="greenn"){ 
 
       $(".box").not(".greenn").hide().find("input").prop("required", false); 
 
       $(".greenn").show().find("input").prop("required", true); 
 
      } 
 
      else{ 
 
       $(".box").hide(); 
 
      } 
 
     }); 
 
    }).change(); 
 
});

Answer 1

终于我得到了答案，感谢所有发送他们的意见和答案给我的朋友。
的JavaScript必须是这样的变化：

$(document).ready(function(){ 
 
    $("#Color").change(function() { 
 
     $(this).find("option:selected").each(function(){ 
 
      if($(this).attr("value")=="redd"){ 
 
       $(".box").not(".redd").hide().find('input').removeAttr('required'); 
 
       $(".redd").show(); 
 
      } 
 
      else if($(this).attr("value")=="greenn"){ 
 
       $(".box").not(".greenn").hide().find('input').removeAttr('required'); 
 
       $(".greenn").show(); 
 
      } 
 
      else{ 
 
       $(".box").hide(); 
 
      } 
 
     }); 
 
    }).change(); 
 
});

此外，如果我们在div的一个选择选项上面javascrpt必须改变像波纹管

$(document).ready(function(){ 
 
    $("#Color").change(function() { 
 
     $(this).find("option:selected").each(function(){ 
 
      if($(this).attr("value")=="redd"){ 
 
       $(".box").not(".redd").hide().find('input,select').removeAttr('required'); 
 
       $(".redd").show(); 
 
      } 
 
      else if($(this).attr("value")=="greenn"){ 
 
       $(".box").not(".greenn").hide().find('input,select').removeAttr('required'); 
 
       $(".greenn").show(); 
 
      } 
 
      else{ 
 
       $(".box").hide(); 
 
      } 
 
     }); 
 
    }).change(); 
 
});

Answer 2

使用.removeAttr('required')而不是.prop('required', false)

Answer 3

设置required为false是不是所有的浏览器可以接受的（举个例子，Internet Explorer 8中不支持它）。您需要删除该属性。

$(".box").not(".redd").hide().find("input").removeAttr('required'); 

和

$(".box").not(".greenn").hide().find("input").removeAttr('required'); 

见this链接，编辑详细信息

Answer 4

您可以使用.removeAttr('required')

试试这个：

$('form').on('submit',function(e){ 
     e.preventDefault() 
     // TODO 
     console.log('Form is submitted to the server'); 
    }); 

$("#Color").change(function() { 
     $(this).find("option:selected").each(function(){ 
      var val = $(this).attr("value"); 
      var box = $(".box"); 
      if(val=="redd"){ 
       box.not("." + val).hide().find("input").removeAttr('required'); 
       $("." + val).show().find("input").prop("required", true); 
      } 
     else if(val=="greenn"){ 
      box.not("." + val).hide().find("input").removeAttr('required'); 
      $("." + val).show().find("input").prop("required", true); 
     } 
     else{ 
      $(".box").hide(); 
     } 
    }); 
}).change();