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

Question

我希望在我的非营利组织的网站上有一个网络捐赠表格，我希望人们在通过信用卡捐赠时能够 select 一次性捐赠或每月捐赠.如果他们 select 每月收到礼物，我就需要将一些值发送给付款处理器，而这样做的一个好方法似乎是为隐藏的表单字段切换禁用属性。为此，我输入了两个 setAttribute() javascript 函数，并输入了两个用于单击单选按钮的事件侦听器。问题是添加这两个函数和两个侦听器似乎已经成功，所以我只能单击 'Monthly (Recurring) Gift' 选项一次。 'Single Gift' 开始时已选中，如果我随后单击 'Monthly (Recurring) Gift'，然后单击 'Single Gift'，浏览器将不允许我 select 'Monthly (Recurring) Gift' 选项再次。如果我删除 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>

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

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

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

Answer 1

问题是单击“重复出现”单选按钮时单选按钮被禁用。我不是 100% 确定您在启用功能中尝试做什么。如果您想启用这些元素，请使用下面的代码。如果不是，您可能没有意识到 MonthlyGift 是您的 Reoccuring 单选按钮，您可以更正该行。不管怎样，这就是问题所在。

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

Answer 2

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

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

来源自此处。 enter link description here

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

Why does my javascript prevent me from selecting a radio button more than once?

javascript

radio-button