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>

选中单选按钮时，日期时间选择器不显示并检查false不起作用

1 个答案: