我昨天开始为网页编写一些代码,但在一些工作上遇到了困难。
我有 4 个单选按钮,其中 3 个应用了值,一个允许用户输入自定义金额,旁边有一个文本字段,例如
[] = 3
[] = 11
[] = 32
[] = [_________] = 输入自定义金额
问题是,如果用户通过按单选按钮选择自定义金额并输入 300,例如,然后决定选择预定义金额 11,他们仍然可以提交,这将输入这两个值。
所以我所做的就是在下面编写一些代码,以便在选择预定义的单选按钮时清除文本框。
我现在遇到的问题是,假设页面加载并且用户立即想要输入自定义金额,十分之九的人很可能会在文本字段内按下或单击,而不是使用旁边的单选按钮但因为我在启动时禁用了它,所以我不知道解决此用户体验问题的最佳方法是什么。有人可以提供帮助吗?这是我到目前为止所拥有的:
<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('');
}
});
最佳答案
关于这个?
$('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" />
关于javascript - 选择任何其他单选按钮时清除文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34938031/