Clearing A Textbox Field When A Radio Button Is Selected In Javascript

I have a web form which allows users to donate money using the predefined radio buttons with a value assigned to them (all different numbers). I also have a choose your own amount

Solution 1:

To disable/enable an element you need to set the value of the disabled property to true/false, removing the property doesn't work so you need

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="radio"name="am_payment"value="3"checked="checked"><strong>64</strong><inputtype="radio"name="am_payment"value="11"checked="checked"><strong>100</strong><inputtype="radio"name="am_payment"value="32"checked="checked"><strong>250</strong><inputtype="radio"value=""name="am_payment"><label>Other</label><inputtype="text"name="CP_otheramount"value=""id="theamount"disabled="disabled" />

Solution 2:

Use removeAttr instead of removeProp and I have modified your code to accept amounts on textbox based on radio button selected

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="radio"name="am_payment"value="3"checked="checked"><strong>64</strong><inputtype="radio"name="am_payment"value="11"checked="checked"><strong>100</strong><inputtype="radio"name="am_payment"value="32"checked="checked"><strong>250</strong><inputtype="radio"value=""name="am_payment"><label>Other</label><inputtype="text"name="CP_otheramount"value=""id="theamount"disabled="disabled"/>

Update

From your comments I hope you are expecting below functionality.

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="radio"name="am_payment"value="3"checked="checked"><strong>64</strong><inputtype="radio"name="am_payment"value="11"checked="checked"><strong>100</strong><inputtype="radio"name="am_payment"value="32"checked="checked"><strong>250</strong><inputtype="radio"value=""name="am_payment"><label>Other</label><inputtype="text"name="CP_otheramount"value=""id="theamount"disabled="disabled"/>