爲什麼我的javascript阻止我多次選擇一個單選按鈕？

我想在我的非營利網站上有一個網站捐贈表單，我希望人們能夠通過信用卡選擇一次性禮物或月度禮物。如果他們選擇月度禮物，我需要將一些值發送到付款處理器，並且一個很好的方法可能會爲隱藏的表單字段切換禁用的屬性。我爲此輸入了兩個setAttribute（）javascript函數，還有兩個用於單擊單選按鈕的事件偵聽器。問題是添加這兩個函數和兩個監聽器似乎已經這樣做了，因此我只能點擊一次「每月（重複）禮物」選項。 '單一禮物'開始檢查，如果我然後點擊'每月（定期）禮物'，然後點擊'單一禮物'，瀏覽器將不會讓我再次選擇'每月（定期）禮物'選項。如果我刪除的JavaScript，它會讓我這樣做。爲什麼？爲什麼我的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與JavaScript的情況是http://jsfiddle.net/s1011205/73zstxz0/1/

的jsfiddle對於沒有JavaScript的場景http://jsfiddle.net/s1011205/5b47abz0/3/

我在其他地方找了一個很好的答案，但我不確定我是否成功。一個人在this one中使用Bootstrap。 This one不適用，因爲我的兩個單選按鈕確實具有相同的名稱。

來源

2015-05-11 Paul Larson

問題是當您單擊Reoccurring單選按鈕時單選按鈕被禁用。我並不是100％確定你要在啓用功能中做什麼。如果您打算啓用這些元素，請使用下面的代碼。如果沒有，也許你沒有意識到MonthlyGift是你的Reoccuring單選按鈕，你可以改正這一行。無論哪種方式，這是問題。

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

來源

2015-05-11 15:39:56 Sam

哇。你是對的。我在EnableRecurring函數中有「MonthlyGift.setAttribute（」disabled「，」「）」，我應該有「RID.setAttribute（」disabled「，」「）」。那是我的問題，現在問題解決了。感謝您收到我的（自己產生的）問題。 –

當然可以！只要確保那些你使用'RID.removeAttribute（「disabled」）;'如果您嘗試啓用（取消禁用）這些元素。 – Sam

Sam，你的意思是說，關於什麼傳遞給服務器，當一個命中表單提交buttom時，setAttribute（「disabled」，「」）不等於removeAttribute（「disabled」）？我認爲將disabled屬性值設置爲空（「」）就足夠了。（當我在11月份開始認真爲我的非營利組織建立網站時，我才真正開始真正學習編碼（在那之前沒有重要的編碼培訓或教育））。 –

您不需要此JavaScript。 name屬性連接單選按鈕。如果你需要在頁面加載時啓用一個，那麼你可以在HTML中設置它。用戶可以從那裏選擇一個或另一個。

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

從這裏開始。 enter link description here

來源

2015-05-11 15:46:24

謝謝你的評論，安德烈。 EnableRecurring和DisableRecurring函數用於隱藏表單字段，而不是用於'Monthly（Recurring）Gift'單選按鈕。我的錯誤是我在EnableRecurring函數中有「MonthlyGift.setAttribute（」disabled「，」「）」，我應該有「RID.setAttribute（」disabled「，」「）」，這可能會鼓勵你認爲我試圖禁用每月禮品單選按鈕（實際上，當我不是）時。根據這個假設，你會是對的，因爲共享名稱已經足夠了。 –

是的。感謝您的澄清。 –

爲什麼我的javascript阻止我多次選擇一個單選按鈕？

回答

相關問題