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.

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

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.

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

回答1:

About this?

  $('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" />

回答2:

I guess what you want is that when someone click on the text input the radio event has to be triggered and the input has to be on focus

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>

来源：https://stackoverflow.com/questions/34938031/clearing-a-textbox-when-any-other-radio-buttons-are-selected

标签

javascript

jquery

textbox

radio-button

clear