在 Javascript 中选择单选按钮时清除文本框字段

Question

我有一个 Web 表单，它允许用户使用预定义的单选按钮和分配给他们的值（所有不同的数字）来捐款。我还有一个选择您自己的金额文本字段，他们可以在其中写入他们希望捐赠的自定义金额。如果用户选择预定义选项，我想清除自定义文本字段。

到目前为止我已经创建了这个：

HTML:

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

JAVASCRIPT:

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

但基于 value === true 的 value="" 似乎并不正确。

有什么办法可以改善吗？

谢谢

Answer 1

使用 removeAttr 而不是 removeProp 并且我修改了您的代码以根据选择的 radio 按钮接受文本框上的金额

$('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($(this).val());
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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"><label>Other</label>
<input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/>

更新

根据您的评论，我希望您期待以下功能。

$('#theamount').on('focus', function() {
  $("input:radio").prop("checked",false);
  $("input[value='']").prop("checked",true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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"><label>Other</label>
<input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/>

Answer 2

要disable/enable一个元素你需要将禁用的属性的值设置为true/false，移除属性不起作用所以你需要

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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">
<label>Other</label>

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

在 Javascript 中选择单选按钮时清除文本框字段

Clearing a textbox field when a radio button is selected in Javascript

html

javascript

jquery

textbox