如何避免单选按钮被自动取消选择。
问题描述:
有两个单选按钮。当选择任何单选按钮时会自动取消选择。如何避免单选按钮被自动取消选择。
以下是无法正常工作的代码片段。
$('.radio_pmt').click(function(){
alert('click'); \t
var payment_mode =$(this).attr('ownid');
\t var type = typeof payment_mode;
\t if(payment_mode == 'undefined' | payment_mode == null){
\t \t alert("Please select payment method");
\t }
\t else
\t {
\t \t if(payment_mode == "paypal")
\t \t {
\t \t \t $('input:radio[name="payment_mode"][ownid="paypal"]').attr('checked', true);
\t \t \t $('input:radio[name="payment_mode"][ownid="paypal"]').val('paypal');
\t \t \t $("#paypal_form").submit();
\t \t }
\t \t else
\t \t {
\t \t \t $('input:radio[name="payment_mode"][ownid="braintree"]').val('braintree');
\t \t \t $('input:radio[name="payment_mode"][ownid="braintree"]').attr('checked');
\t \t \t $("#braintree_details").slideDown("slow");
\t \t \t
\t \t }
\t }
\t return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="frm_choose_plan" name="frm_choose_plan">
<label>Choose Payment method:</label>
<input type="radio" class="radio_pmt" ownid="paypal" name="payment_mode" value="Paypal">Paypal
<input type="radio" class="radio_pmt" ownid="braintree" name="payment_mode" value="braintree" id="credit_cardpmt">Credit card
</form>
答
只是删除return false;
该块选择
$('.radio_pmt').click(function(){
alert('click'); \t
var payment_mode =$(this).attr('ownid');
\t var type = typeof payment_mode;
\t if(payment_mode == 'undefined' | payment_mode == null){
\t \t alert("Please select payment method");
\t }
\t else
\t {
\t \t if(payment_mode == "paypal")
\t \t {
\t \t \t $('input:radio[name="payment_mode"][ownid="paypal"]').attr('checked', true);
\t \t \t $('input:radio[name="payment_mode"][ownid="paypal"]').val('paypal');
\t \t \t $("#paypal_form").submit();
\t \t }
\t \t else
\t \t {
\t \t \t $('input:radio[name="payment_mode"][ownid="braintree"]').val('braintree');
\t \t \t $('input:radio[name="payment_mode"][ownid="braintree"]').attr('checked');
\t \t \t $("#braintree_details").slideDown("slow");
\t \t \t
\t \t }
\t }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="frm_choose_plan" name="frm_choose_plan">
<label>Choose Payment method:</label>
<input type="radio" class="radio_pmt" ownid="paypal" name="payment_mode" value="Paypal">Paypal
<input type="radio" class="radio_pmt" ownid="braintree" name="payment_mode" value="braintree" id="credit_cardpmt">Credit card
</form>
答
你的主要问题是 “返回false” 防止默认事件。
我的建议
$('.radio_pmt').click(function(){
var $input = $(this);
var inputType = $input.attr('ownid');
if (inputType === 'paypal') {
// do something if user clicked on paypal
// your code
$("#paypal_form").submit();
$('#test').html('clicked paypal'); // remove this on live page
}
else if (inputType === 'braintree') {
// do something if user clicked on baintree
$("#braintree_details").slideDown("slow");
$('#test').html('clicked Credit Card'); // remove this on live page
}
else {
// nothing choosed! But i cant be reached because you choose the ".radio_pmt" selector to bind your click event which has both the "ownid"
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="frm_choose_plan" name="frm_choose_plan">
<label>Choose Payment method:</label>
<input type="radio" class="radio_pmt" ownid="paypal" name="payment_mode" value="Paypal">Paypal
<input type="radio" class="radio_pmt" ownid="braintree" name="payment_mode" value="braintree" id="credit_cardpmt">Credit card
</form>
<div id="test"></div>
的默认操作去除'return false;'行。也使用单选按钮时,最好使用更改事件 – guradio
@guradio:你说得对... – DiniZx
@guradio:在答案中加上你的建议,这样你就可以得到这个解决方案的功劳.. – DiniZx