選中文本框時，焦點無法工作

Question

我在這里有一個表單，該表單的ID與用戶一樣，能夠選擇單選按鈕來選擇預定義的金額選項，或者按文本框（焦點）來選擇自定義金額。 以下javascript的目的是在選擇了預定義的金額后清除文本框。 它還允許用戶單擊文本框（焦點對准）以在CP_otheramount字段中輸入自定義金額（也可以使用單選按鈕作為后備）。

除了onfocus以外，其他一切似乎都有效。 它在負載下完美工作...但是嘗試這種情況：

加載頁面，在文本框內單擊，然后決定通過選擇值3單選按鈕（64）來改變主意...然后決定再次在onfocus文本框內按下量...它被禁用並阻止您單擊里面或寫一個數字！

有人可以在這里看到問題嗎？ 這很奇怪，因為它不能在實時站點上使用Stackoverflow。 任何幫助將非常感激。

到目前為止已經創建了以下內容：

function activate() {
  $('#other').prop('checked', true);
  $('#other').trigger('click');
  $('#theamount').focus();
}
$('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('');
  }
});

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

Answer 1

代碼的問題在於，您在檢查每個單選按鈕時都沒有取消選中它們。

function activate() {
  // $('#other').prop('checked', true); Remove this line;
  $('#other').trigger('click');
  $('#theamount').focus();
}
$('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('');
  }
});

並且

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Only check one, or none by Default -->
<input type="radio" name="am_payment" value="3" checked = "checked"> <strong>64</strong>

<input type="radio" name="am_payment" value="11"> <strong>100</strong>

<input type="radio" name="am_payment" value="32"> <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>

更新：

它對我有用，但是我不知道為什么它對您不起作用，所以我重寫了這些函數。看看是否對您有用。

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

<input type="radio" name="am_payment" value="32"> <strong>250</strong>

<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>

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

<script>
    function activate(){
        $('#theamount').attr('disabled',false);
        $('#theamount').focus();
        $('#other').click();
    }

    function deactivate(){
        $('#theamount').val('');
        $('#theamount').attr('disabled',true);
    }

    $('#toggle').click(function(){
        activate();
    });
    $('input[name="am_payment"]').change(function(){
        if($(this).val() != ""){
            deactivate();
        }else{
            activate();
        }
    });
</script>