限制單選按鈕上的點擊次數並乘以一個數字

Question

正如您在jsfiddle中看到的那樣，單擊#CreditCard單選按鈕時，Total將乘以1.02，並更新Total。

問題是，同一個按鈕可以多次點擊，並且數量不斷增加。

我想限制一個按鈕的點擊次數爲1，但也希望能夠在借記卡和信用卡之間切換。 （所以當其他按鈕被點擊時，限制被重置爲0）

任何幫助，非常感謝。

https://jsfiddle.net/n52fy9am/2/

HTML

Total: <span id="totalPrice">£154.67</span> 
<br> 

<form> 

<input id="DebitCard" type="radio" name="payment" checked> 
<label for="DebitCard">Debit Card</label> 
<br> 

<input id="CreditCard" type="radio" name="payment"> 
<label for="CreditCard">Credit Card (2% extra)</label> 
<br> 

</form> 

JS

// credit card 2% surcharge 
$('#CreditCard').on("click", function() { 
    var totalPrice = parseFloat($('#totalPrice').text().replace(/([^0-9\\.])/g, "")); 
    var surcharge = (totalPrice * 1.02).toFixed(2); 
    // Update total 
    $('#totalPrice').html("£" + surcharge); 
}); 

// remove 2% 
$('#DebitCard').on("click", function() { 
    var totalPrice = parseFloat($('#totalPrice').text().replace(/([^0-9\\.])/g, "")); 
    var surcharge = (totalPrice * 0.98).toFixed(2); 
    // Update total 
    $('#totalPrice').html("£" + surcharge); 
}); 

Answer 1

只需使用一個標誌來做到這一點。單擊單選按鈕時更改標誌。以便您可以控制是否執行計算。

此外，因爲您將其與toFixed(2)四捨五入，因此在您進行計算時，數字的小數部分將會混亂。所以使用一個變量來存儲初始值。按下debitCard按鈕後放回去。

var isCreditCard = false; 
var initialPrice = 154.67; 
$('#totalPrice').html("£" + initialPrice.toString()); 

// credit card 2% surcharge 
$('#CreditCard').on("click", function() { 
    if (!isCreditCard) { 
     var totalPrice = parseFloat($('#totalPrice').text().replace(/([^0-9\\.])/g, "")); 
     var surcharge = (totalPrice * 1.02).toFixed(2); 
     // Update total 
     $('#totalPrice').html("£" + surcharge); 

     isCreditCard = true; 
    } 
}); 

// remove 2% 
$('#DebitCard').on("click", function() { 
    if (isCreditCard) { 
     // Update total 
     $('#totalPrice').html("£" + initialPrice.toString()); 
     isCreditCard = false; 
    } 
}); 

Answer 2

我把你的JS小提琴，變成了堆棧段;）

我修改了代碼和必要的安置意見的地方。 我存儲的初始計數值在每次點擊時都會增加，如果該值超過0，則該函數被取消，直到其他收音機被選中，重置之前點擊過的一個。

$(function() { 
 
    // keep count of n times clicked 
 
    var creditCardCount = 0; 
 
    var debitCardCount = 0; 
 
    
 
    // credit card 2% surcharge 
 
    $('#CreditCard').on("change", function() { 
 
    // if amount is greater or equal to 1 then abort the function 
 
    if (creditCardCount > 0) { 
 
     return false; 
 
    } 
 
    var totalPrice = parseFloat($('#totalPrice').text().replace(/([^0-9\\.])/g, "")); 
 
    var surcharge = (totalPrice * 1.02).toFixed(2); 
 
    // Update total 
 
    $('#totalPrice').html("£" + surcharge); 
 
    // increment credit card count 
 
    creditCardCount++; 
 
    // reset the other option to 0 
 
    debitCardCount = 0; 
 
    }); 
 

 
    // remove 2% 
 
    // do the same here but for the opposite cards 
 
    $('#DebitCard').on("change", function() { 
 
    if (debitCardCount > 0) { 
 
     return false; 
 
    } 
 
    var totalPrice = parseFloat($('#totalPrice').text().replace(/([^0-9\\.])/g, "")); 
 
    var surcharge = (totalPrice * 0.98).toFixed(2); 
 
    // Update total 
 
    $('#totalPrice').html("£" + surcharge); 
 
    debitCardCount++; 
 
    creditCardCount = 0; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
Total: <span id="totalPrice">£154.67</span> 
 
<br> 
 

 
<form> 
 

 
    <input id="DebitCard" type="radio" name="payment" checked> 
 
    <label for="DebitCard">Debit Card</label> 
 
    <br> 
 

 
    <input id="CreditCard" type="radio" name="payment"> 
 
    <label for="CreditCard">Credit Card (2% extra)</label> 
 
    <br> 
 

 
</form>

Answer 3

我建議你簡化你的代碼。檢查演示 - Fiddle：

$(function() { 
    var lastRadioClicked = 'DebitCard', 
     canClick = true; 

    $('[name="payment"]').on("click", function() { 
     var surchargePercent; 
     if (lastRadioClicked === this.id) { 
      if (canClick) { 
       if (this.id === 'DebitCard') { 
        // debit   
        surchargePercent = 0.98; 
       } else { 
        // credit  
        surchargePercent = 1.02; 
       } 
       canClick = false; 
       var totalPrice = parseFloat($('#totalPrice').text().replace(/([^0-9\\.])/g, "")); 
       var surcharge = (totalPrice * surchargePercent).toFixed(2); 
       // Update total 
       $('#totalPrice').html("£" + surcharge); 
      } 
     } else { 
      lastRadioClicked = this.id; 
      canClick = true; 
     } 


    }); 
});