2016-03-12 42 views
0

我有兩個單選按鈕,現在交付和交付。現在交付是默認選中的。如果客戶希望在稍後交貨時點擊按鈕上的交貨,則必須顯示日期選擇器,並且必須取消選中「立即交貨」單選按鈕。但是這些不會發生。日期選擇器不顯示,現在發送收音機不轉向未選中狀態。我的代碼有什麼問題?任何人都可以幫忙謝謝。當單選按鈕選中,日期時間選擇器不顯示和檢查錯誤不工作

下面你可以看到我的看法;

<div class="checkout-nameoncake-itemcontainer"> 
    <div class="checkout-nameoncake-name"> 
     <label class="label-checkout-deliverytime">Deliver Now(~ 45dk.)</label><input type="radio" id="DeliveryNowRadio" checked="checked" name="DeliveryNow" value=" " /> 
     <label class="label-checkout-deliverytime">Delivert at </label><input type="radio" id="DeliveryLaterRadio" name="RequestedDeliveryDate" value=" " /> 
    </div> 
    <div class="checkout-nameoncake-details"> 
     <input type="date" name="name" class="datepicker" id="datepicker" style="margin: 17% 0 0 5%;border-radius: 7%;border: solid;border-width: thin;border-color: lightblue;display:none" value="" /> 
    </div> 
</div> 

下面你可以看到我的jQuery。

<script> 
    $(document).ready(function() { 
     $("#DeliveryLaterRadio").click(function() { 
      $("#DeliveryNowRadio").prop("checked", false); 
      $(".datepicker").css("display", "inline-block"); 
     }); 

     $("#DeliveryNowRadio").click(function() { 
      $("#DeliveryLaterRadio").prop("checked", false); 
      $(".datepicker").css("display", "none"); 
     }); 
    }); 
</script> 

回答

1

我想你的代碼出來plunker,和它的作品:

https://plnkr.co/OJVF85JgJiZSghMtyUtf

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    </head> 

    <body> 
    <div class="checkout-nameoncake-itemcontainer"> 
     <div class="checkout-nameoncake-name"> 
     <label class="label-checkout-deliverytime">Deliver Now(~ 45dk.)</label> 
     <input type="radio" id="DeliveryNowRadio" checked="checked" name="DeliveryNow" value=" " /> 
     <label class="label-checkout-deliverytime">Delivert at </label> 
     <input type="radio" id="DeliveryLaterRadio" name="RequestedDeliveryDate" value=" " /> 
     </div> 
     <div class="checkout-nameoncake-details"> 
     <input type="date" name="name" class="datepicker" id="datepicker" style="margin: 17% 0 0 5%;border-radius: 7%;border: solid;border-width: thin;border-color: lightblue;display:none" value="" /> 
     </div> 
    </div> 
    <script> 
    $(document).ready(function() { 
     $("#DeliveryLaterRadio").click(function() { 
      $("#DeliveryNowRadio").prop("checked", false); 
      $(".datepicker").css("display", "inline-block"); 
     }); 

     $("#DeliveryNowRadio").click(function() { 
      $("#DeliveryLaterRadio").prop("checked", false); 
      $(".datepicker").css("display", "none"); 
     }); 
    }); 
    </script> 
    </body> 



</html> 
+0

我沒有undertstand發生了什麼,但現在的工作對我來說太。謝謝你的時間。@ raszpi – livefreeor

+0

太棒了,很高興幫助:] – raszpi

相關問題