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

Clearing a textbox when any other radio buttons are selected

本文关键字：清除 文本 单选按钮 选择 任何 其他      更新时间：2023-09-26

我昨天开始为一个网页编写一些代码，但我在让一些事情工作时遇到了麻烦。

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

[] = 3

[] = 11

[] = 32

[] = [______

____] = 输入自定义金额

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

所以我所做的是在下面编写一些代码，以便在选择了预定义的单选按钮时清除文本框。

我现在遇到的问题是，假设页面加载并且用户立即想要输入自定义金额，10 次中有 9 次他们更有可能在文本字段中按下或单击，而不是使用旁边的单选按钮，但由于我在启动时禁用了它，我不知道解决此 UX 问题的最佳方法是什么。任何人都可以提供帮助吗？这是我到目前为止所拥有的：

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

我想你想要的是当有人点击文本输入时必须触发无线电事件，并且输入必须聚焦

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>

相关文章：