基于一个单选按钮的不需要的隐藏输入

Question

我有三个单选按钮：安装、交付和 estock。

每个单选按钮都会显示/隐藏一些需要填写的输入。

当单击这些单选按钮之一时，将显示这些输入并且必须填写。

我的问题是如何使所需的输入在隐藏时不再需要。

这是根据单选按钮显示/隐藏输入的脚本。

  <style type="text/css">.box{display: none;}</style>
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <script type="text/javascript">
       $(document).ready(function(){
          $('input[type="radio"]').click(function(){
             if($(this).attr("value")=="EStock"){
                $(".box").hide();
                $(".EStock").show();
             }
             if($(this).attr("value")=="InfiStall"){
                $(".box").hide();
                $(".InfiStall").show();
             }
             if($(this).attr("value")=="Delivery"){
                $(".box").hide();
                $(".Delivery").show();
             }
       });
     });    
  </script>

---

    echo '<div id="method-detail-information">';                          

    echo '<ul id="delivery-method" style="width:488px; margin:10px 0; padding-left:12px;"><b>Metode Pengambilan Barang : </b> 
            <li class="method-of-approval"><input type="radio" name="method[]" value="EStock" required>EStock</li>
            <li class="method-of-approval"><input type="radio" name="method[]" value="InfiStall">InfiStall</li>
            <li class="method-of-approval"><input type="radio" name="method[]" value="Delivery">Delivery</li>
          </ul>';


    echo'<div class="Delivery box" style"position:relative; display:block; float:left; background:red;">
         <ul id="delivery-method" style="width:488px; margin:10px 0; padding-left:12px;"><b>Pilih Layanan Antar : </b> 
            <li class="method-of-approval"><input type="radio" name="deliveryService[]" value="JNE" required>JNE</li>
            <li class="method-of-approval"><input type="radio" name="deliveryService[]" value="TIKI">TIKI</li></ul>

         <ul id="delivery-address-wrapper">
            <li><span class="delivery-address">City</span>
                <span><input class="delivery-address-input" type="text" placeholder="City" required /></span></li>
            <li><span class="delivery-address">Address</span>
                <span><textarea rows="5" class="delivery-address-input" placeholder="Address" required></textarea></span></li></ul>
         </div>';

    echo'<div class="InfiStall box" style"position:relative; display:block; float:left; background:yellow;">
         <ul style="padding:12px; width:480px; margin:10px 0;"><b>Pilih Lokasi Infi Stall :</b> <br>
             <li class="method-of-payment"><input type="radio" name="location[]" value="Kemayoran" required>Kemayoran<br></li>
             <li class="method-of-payment"><input type="radio" name="location[]" value="Sunter">Sunter<br></li>
         </ul>
         </div>';

    echo'<div class="EStock box" style"background:yellow;">We will keep your order until you decide to have it soon
         </div>';

Answer 1

您可以使用removeAttr() 来从li's 中的输入类型radio 中删除所需的属性，如图所示：-

 $(document).ready(function(){
       $('input[type="radio"]').click(function(){
             if($(this).attr("value")=="EStock"){
                $(".box").hide();
                $(".box ul li input:radio").removeAttr('required');
                $(".EStock").show();
             }
             if($(this).attr("value")=="InfiStall"){
                $(".box").hide();
                $(".box ul li input:radio").removeAttr('required');
                $(".InfiStall").show();
             }
             if($(this).attr("value")=="Delivery"){
                $(".box").hide();
                $(".box ul li input:radio").removeAttr('required');
                $(".Delivery").show();
             }
       });
 }); 

Reference

---

正如提问者所说，他也想删除值，然后您可以尝试清空该值或使用.removeAttr()，如图所示：

$(".box ul li input:radio").removeAttr('value');

或

$(".box ul li input:radio").val('');

或

正如 leo 在 cmets 部分中正确评论的那样，您可以向字段添加禁用属性，并且永远无法将禁用字段值发布到服务器。