javascript - 文本框仅在选中第一个单选按钮时接受数字

Question

我有四个单选按钮，我希望当用户单击第一个单选按钮时，输入文本框只能接受数字，但如果他们选择其他单选按钮，则只能接受数字和文本。下面是我的代码:

<input class="form-control" type="text" id="usr_matriculation" maxlength="40" name="usr_matriculation" required="required">

    <div class="radio">
        <label class="radio-inline"><input type="radio" onclick="il.Form.showSubForm('subform_usr_id_type_1', 'usr_id_type', null);" name="usr_id_type" id="usr_id_type_1" value="1">
        New Identity Card No.</label>

    </div>


    <div class="radio">
        <label class="radio-inline"><input type="radio" onclick="il.Form.showSubForm('subform_usr_id_type_2', 'usr_id_type', null);" name="usr_id_type" id="usr_id_type_2" value="2">
        Passport No.</label>

    </div>


    <div class="radio">
        <label class="radio-inline"><input type="radio" onclick="il.Form.showSubForm('subform_usr_id_type_3', 'usr_id_type', null);" name="usr_id_type" id="usr_id_type_3" value="3">
        Army No.</label>

    </div>


    <div class="radio">
        <label class="radio-inline"><input type="radio" onclick="il.Form.showSubForm('subform_usr_id_type_4', 'usr_id_type', null);" name="usr_id_type" id="usr_id_type_4" value="4">
        Police No.</label>

    </div>

我尝试使用下面的代码，但是当我选择其他单选按钮时，我无法键入文本，只需要输入数字。我需要放 if else 吗？我需要它自动更改而不刷新页面。

$('#usr_id_type_1').click(function() {
      alert("1");

    $('input[name="usr_matriculation"]').keyup(function(e)
                                    {
      if (/\D/g.test(this.value))
      {
        // Filter non-digits from input value.
        this.value = this.value.replace(/\D/g, '');
      }
    });
    });

我的 fiddle :https://jsfiddle.net/designblog4u/yock8zdw/

Answer 1

这可能不是最好的解决方案，但我做了一些测试。

<input type="text" id="i">

<input checked type="radio" id="r_n" name="rn">
<input type="radio" id="r" name="rn">
<input type="radio" id="r" name="rn">
<input type="radio" id="r" name="rn">

这段代码可以帮助您找到正确的方法或改进您自己的代码。

$("#i").keyup(function () {
  if ($('#r_n').is(':checked')) {
  console.log("Validating #r1...")
  // Filter non-digits from input value.
  this.value = this.value.replace(/\D/g, '');
}
else {
  console.log("Validating the other radios")
  this.value = this.value.replace(/[^A-Za-z0-9]+/g, '');
}
});
// Optional: Delete input value when radio changes
$('input:radio[name="rn"]').change(
function(){
  $("#i").val('');
});