选择任何其他单选按钮时清除文本框 [英] Clearing a textbox when any other radio buttons are selected

问题描述

昨天我开始为网页编写一些代码&我无法让一些事情正常工作.

I started working on some code for a webpage yesterday & i am having trouble getting a few things working.

我有4个单选按钮，其中3个已应用了值&允许用户输入一个自定义金额，并在其旁边添加一个文本字段，例如

I have 4 radio buttons, 3 of which have values applied to them & one which allows the user to enter a custom amount with a textfield next to it e.g

[] = 3

[] = 11

[] = 32

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

[] = [_________] = Enter Custom Amount

问题是，如果用户通过按单选按钮选择自定义金额并输入300(例如)，然后决定选择他们仍可以提交的预定义金额11，那么这两个值都将输入.

The problem is, if a user selects custom amount by pressing the radio button and enters 300 e.g, then afterwards decides to choose a predefined amount of 11 they can still submit which will enter both values.

所以我要做的是，如果选择了预定义的单选按钮，则在下面编写一些代码以清除文本框.

So what I done was write some of this code below to CLEAR the textbox if a predefined radio button is selected.

我现在遇到的问题是，页面加载并且用户立即想要输入自定义金额，十分之九(很可能是PRESS或在文本字段中单击而不是使用旁边的单选按钮)它，但是因为我在启动时禁用了它，所以我不知道解决此UX问题的最佳方法是什么.任何人都可以提供帮助吗?这是我到目前为止的内容:

The problem I have now is that say the page loads and the user instantly wants to enter a custom amount, 9 times out of 10 they are more than likely to PRESS or click inside the textfield rather than use the radio button next to it but because I have disabled it on startup i don't know what the best way to resolve this UX problem. Can anyone give help? Here's what I have so far:

  <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" />

这篇关于选择任何其他单选按钮时清除文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！