清除文本框时，任何其他单选按钮选择

Question

我开始在一些代码工作的网页昨天&我有麻烦工作的几件事情。

我有4个单选按钮，其中3个已经施加到它们&一个，其允许用户与一个文本字段输入自订量旁边值例如

[] = 3

[] = 11

[] = 32

[] = [_________] =输入自定义金额

的问题是，如果一个用户的按单选按钮，选定制量并进入300 e.g，然后后来决定选择11个预定量，他们仍然可以提交将进入这两个值。

所以，我做的是写一些下面这段代码以清除该文本框，如果选择预定义的单选按钮。

现在的问题是，说加载页面，用户立即想要输入一个自定义的金额，10次9次他们更可能按下或单击文本框内，而不是使用下一个单选按钮但是因为我在启动时禁用了它，所以我不知道解决这个用户体验问题的最好方法是什么。任何人都可以帮忙吗？这是我到目前为止：

<input type="radio" name="am_payment" value="3" checked="checked"> <strong>64</strong> 

<input type="radio" name="am_payment" value="11" checked="checked"> <strong>100</strong> 

<input type="radio" name="am_payment" value="32" checked="checked"> <strong>250</strong> 

<input type="radio" value="" name="am_payment"><label>Other</label> 

<input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/> 

$('input[name="am_payment"]').on('click', function() { 
    if ($(this).val() === '') { 
    $('input[name="CP_otheramount"]').val(''); 
     $('#theamount').removeAttr("disabled"); 
    } 
    else { 
     $('#theamount').prop("disabled", "disabled"); 
    $('input[name="CP_otheramount"]').val(''); 
    } 
}); 

Answer 1

关于这个？

$('input[name="am_payment"]').on('click', function() { 
 
    if ($(this).val() === '') { 
 
     $('#theamount').val('').prop("disabled", false).focus(); 
 
    } 
 
    else { 
 
     $('#theamount').val('').prop("disabled", true); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<label><input type="radio" name="am_payment" value="3"> <strong>64</strong></label> 
 

 
<label><input type="radio" name="am_payment" value="11"> <strong>100</strong></label> 
 

 
<label><input type="radio" name="am_payment" value="32"> <strong>250</strong></label> 
 

 
<label><input type="radio" value="" name="am_payment" checked>Other</label> 
 

 
<input type="number" name="CP_otheramount" value="" id="theamount" />

Answer 2

我想你想要的是，当有人点击文本输入 所述无线事件已被触发，输入必须是焦点

function activate() { 
 
    console.log('clicked'); 
 
    $('#other').prop('checked', true); 
 
    $('#other').trigger('click'); 
 
    $('#theamount').focus(); 
 
} 
 
$('input[name="am_payment"]').on('click', function() { 
 
    console.log('changed'); 
 
    if ($(this).val() === '') { 
 
    $('input[name="CP_otheramount"]').val(''); 
 
    $('#theamount').removeAttr("disabled"); 
 
    } else { 
 
    $('#theamount').prop("disabled", "disabled"); 
 
    $('input[name="CP_otheramount"]').val(''); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<input type="radio" name="am_payment" value="3" checked="checked"> <strong>64</strong> 
 

 
<input type="radio" name="am_payment" value="11" checked="checked"> <strong>100</strong> 
 

 
<input type="radio" name="am_payment" value="32" checked="checked"> <strong>250</strong> 
 

 
<input type="radio" value="" name="am_payment" id="other"> 
 
<label>Other</label> 
 

 
<span onclick="activate();"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>