Question

我有三个单选按钮：infistall，delivery和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 中的输入类型广播中删除所需的属性，如下所示： -

 $(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');

OR

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

OR

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

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

1 个答案: