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

I would like to have a web donation form on my non-profit's website, and I would like people to be able to select a one-time gift or a monthly gift when they give via credit card. If they select a monthly gift, I would need to send some values to the payment processor, and a good way to do that seemed to be toggling the disabled attribute for the hidden form fields. I entered in two setAttribute() javascript functions for doing that, and two event listeners for clicking on the radio buttons. The problem is that adding those two functions and two listeners seems to have made it so that I can only click on the 'Monthly (Recurring) Gift' option once. The 'Single Gift' starts out checked, and if I then click on 'Monthly (Recurring) Gift' and then click on 'Single Gift', the browser won't let me select the 'Monthly (Recurring) Gift' option again. If I remove the javascript, it will let me do it. Why?

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

Here is my code with 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 scenario with javascript is http://jsfiddle.net/s1011205/73zstxz0/1/

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

JSFiddle for scenario without javascript is http://jsfiddle.net/s1011205/5b47abz0/3/

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

I have looked elsewhere for a good answer but am not sure that I have been successful. A person was using Bootstrap in this one. This one does not apply because my two radio buttons do have the same name.

我在其他地方找了一个好的答案但不确定我是否成功了。一个人正在使用Bootstrap。这个不适用,因为我的两个单选按钮确实具有相同的名称。

2 个解决方案

#1

The issue is that the radio button is being disabled when you click the Reoccurring radio button. I'm not 100% sure what you are trying to do in the Enable function. If you want intended to enable those elements, use this code below. If not, perhaps you did not realize the MonthlyGift is your Reoccuring radio button and you can correct that line. Either way, that is the issue.

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

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

#2

You wouldn't need JavaScript for this. The name attribute connects the radio buttons. If you need one to be enabled on page load then you can set that in the HTML. The user can then select one or the other from there.

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

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

Sourced from here. enter link description here

来自这里。在此输入链接描述