选中单选按钮时，datetimepicker 不显示并且选中 false 不起作用

Question

我有两个单选按钮，立即交货和交货时间。默认选中“立即交付”。如果客户在单击“交货时间”按钮时希望稍后交货，则必须显示日期选择器并且必须取消选中“立即交货”单选按钮。但这些不会发生。日期选择器未显示，“立即交货”收音机未变为未选中状态。我的代码有什么问题？任何人都可以帮忙。谢谢

下面是我的观点；

<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>

Answer 1

我在 plunker 上试过你的代码，它有效：

https://plnkr.co/OJVF85JgJiZSghMtyUtf

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.2.0" 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>

选中单选按钮时，datetimepicker 不显示并且选中 false 不起作用

When Radio button checked, datetime picker does not show and checked false doesnt work

jquery

radio-button

checked