Question

我希望在我的非营利性网站上有一个网络捐赠表格，我希望人们能够在通过信用卡提供时选择一次性礼物或每月礼物。如果他们选择每月礼物，我需要向支付处理器发送一些值，并且这样做的好方法似乎是切换隐藏表单字段的disabled属性。为此，我输入了两个setAttribute（）javascript函数，以及两个用于单击单选按钮的事件侦听器。问题是，添加这两个功能和两个听众似乎已经做到了这一点，我只能点击“每月（重复）礼物”。选项一次。 “单一礼物”＃39;开始检查，如果我然后点击＆＃39;每月（重复）礼物＆＃39;然后点击“单个礼物”，浏览器不会让我选择“每月（重复）礼物”。再次选择。如果我删除了javascript，它会让我这样做。为什么呢？

以下是我的javascript代码：

    <form>

    <input type="hidden" name="OverRideRecureDay"
    id="overriderecureday"     value="Y" disabled="disabled">
    <input type="hidden" name="RID" id="rid" value="your_RID#"
    disabled="disabled">
    <input type="hidden" name="recur_times" id="recur_times"
    value="your_recur_times" disabled="disabled">

    <div id="giftfrequency">
    <div id="giftfrequencylabel" class="editor-label2">Gift Frequency:                       
    </div>

    <div class="editor-radio">
    <input type="radio" id="onetimedonation" name="override_recur"
    value="" checked="checked"></input> <span>Single Gift</span>

    </div>
    <div class="editor-radio">
    <input type="radio" id="recurringdonation" name="override_recur"
    value="Y"></input> <span>Monthly (Recurring) Gift</span>

    </div>
    </div>
    </form>

    <script>
      var MonthlyGift = document.getElementById("recurringdonation");
      var OneTimeGift = document.getElementById("onetimedonation");
      var OvrRecurDay = document.getElementById("overriderecureday");
      var RecurTimes = document.getElementById("recur_times");
      var RID = document.getElementById("rid");
      function EnableRecurring () {
        MonthlyGift.setAttribute("disabled", "");
        OvrRecurDay.setAttribute("disabled", "");
        RecurTimes.setAttribute("disabled","");
      };
      function DisableRecurring () {
        RID.setAttribute("disabled", "disabled");
        OvrRecurDay.setAttribute("disabled", "disabled");
        RecurTimes.setAttribute("disabled","disabled");
      }; 
      document.getElementById("recurringdonation").addEventListener("click", EnableRecurring);
      document.getElementById("onetimedonation").addEventListener("click", DisableRecurring);
    </script>

JSFiddle for javascript的场景是http://jsfiddle.net/s1011205/73zstxz0/1/

没有javascript的情景的JSFiddle是http://jsfiddle.net/s1011205/5b47abz0/3/

我已经到别处寻找一个好的答案但不确定我是否成功了。一个人在this one中使用了Bootstrap。 This one不适用，因为我的两个单选按钮的名称相同。

Answer 1

问题是单击“重复出现”单选按钮时，单选按钮被禁用。我不能100％确定你在启用功能中想要做什么。如果您想要启用这些元素，请使用以下代码。如果没有，也许您没有意识到MonthlyGift是您的Reoccuring单选按钮，您可以更正该行。无论哪种方式，这都是问题所在。

function EnableRecurring() {
  MonthlyGift.removeAttribute("disabled");
  OvrRecurDay.removeAttribute("disabled");
  RecurTimes.removeAttribute("disabled");
};

Answer 2

你不需要JavaScript。 name属性连接单选按钮。如果您需要在页面加载时启用一个，那么您可以在HTML中设置它。然后，用户可以从那里选择一个或另一个。

<input type="checkbox" name="vehicle" value="Car" checked>

来自这里。 enter link description here

为什么我的javascript阻止我多次选择一个单选按钮？

2 个答案: