隠しdivで必要なタグを無効にする

Question

私の連絡先フォームには、ドロップダウンリストを表示または非表示にするdivボックスがいくつかあります。私はが必要ですタグがこのdivにあります。問題は、このreqiredタグの1つが隠しdivにあるときです。フォームを送信できません。何ができるのですか？

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

 
    $("#ddColor").change(function() { 
 
    $(this).find("option:selected").each(function() { 
 
     if ($(this).attr("value") == "red") { 
 
     $(".inner-box").not(".red").hide(); 
 
     $(".red").show(); 
 
     } else if ($(this).attr("value") == "green") { 
 
     $(".inner-box").not(".green").hide(); 
 
     $(".green").show(); 
 
     } else { 
 
     $(".inner-box").hide(); 
 
     } 
 
    }); 
 
    }).change(); 
 
});

.inner-box { 
 
    border: 2px solid; 
 
    height: 30px; 
 
    background-color: yellow; 
 
} 
 
.green { 
 
    background-color: green; 
 
} 
 
.red { 
 
    background-color: red; 
 
}

<div> 
 
    <fieldset> 
 
    <p dir="rtl"> 
 
     <label>case1</label> 
 
     <select id="Color" required="required"> 
 
     <option>please select</option> 
 
     <option value="redd">home 
 
      <option> 
 
      <option value="greenn">laptop</option> 
 
     </select> 
 
    </p> 
 
    </fieldset> 
 
</div> 
 
<div class="redd box"> 
 
    <div> 
 
    <fieldset> 
 
     <p dir="rtl"> 
 
     <label>case2</label> 
 
     <select id="ddColor" required="required"> 
 
      <option>please select</option> 
 
      <option value="red">sell 
 
      <option> 
 
       <option value="green">rent</option> 
 
     </select> 
 
     </p> 
 
    </fieldset> 
 
    </div> 
 
    <div class="red inner-box"> 
 
    <input dir="rtl" type="text" name="pricerange" required /> 
 
    </div> 
 
    <div class="green inner-box"> 
 
    <input dir="rtl" type="text" name="rentrange" required/> 
 
    </div> 
 

 
</div> 
 
<div class="greenn box"> 
 
    <input dir="rtl" type="text" name="ramrange" required/> 
 
</div>

Answer 1

をあなたが隠したときにそれらにfalseからrequiredを設定する必要があります、と示すとき、再びtrueします。それを示すとき、それらのdiv内inputsの全てが必要な場合は簡単です。

例としてあなた.reddのdivを使用して：

隠す：

$(".redd").hide().find("input").prop("required", false); 

表示：

$(".redd").show().find("input").prop("required", true); 

のうちが必要な場合は、その後、彼らの古い設定を覚えているし、したいでしょう、それを再適用：

は

隠す：

$(".redd").hide().find("input").each(function() { 
    var $input = $(this); 
    $input.data("was-required", $input.prop("required")); 
    $input("required", false); 
}); 

表示：

$(".redd").show().find("input").each(function() { 
    var $input = $(this); 
    $input.prop("required", $input.data("was-required")); 
}); 

あなたがマークアップに隠されたいくつかのから始める場合、あなたはよその上showアクションのいずれかの前にこれをしたい：

$("input").each(function() { 
    $(this).data("was-required", this.required); 
}); 

... initializへeフラグ。彼らがすべて表示を開始した場合、上記の「非表示」アクションが行われるため、必要はありません。

Answer 2

あなたが使用することができattrに削除するには：

$('#id').removeAttr('required');​​​​​