對焦選擇文本框時不工作

Question

我在這裏有一個表單，其中用戶可以選擇單選按鈕來選擇預定義的金額選項，或者按下文本框（焦點）來選擇自定義金額。下面的JavaScript的目的是在選擇預定義數量時清除文本框。它還允許用戶點擊文本框（onfocus）在CP_otheramount字段中輸入自定義金額（同時使用單選按鈕作爲後備）。

除了聚焦之外，這一切似乎都在起作用。它適用於負載...但嘗試這種情況下：

加載頁面，單擊文本框內，但然後決定通過選擇值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> 

UPDATE：

它是爲我工作，但我不知道爲什麼它不爲你工作，所以我改寫了functions..See如果這對你有用。

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