清除文本框時，任何其他單選按鈕選擇

Question

我開始在一些代碼工作的網頁昨天&我有麻煩工作的幾件事情。

我有4個單選按鈕，其中3個已經施加到它們&一個，其允許用戶與一個文本字段輸入自訂量旁邊值例如

[] = 3

[] = 11

[] = 32

[] = [_________] =輸入自定義金額

的問題是，如果一個用戶的按單選按鈕，選定製量並進入300 e.g，然後後來決定選擇11個預定量，他們仍然可以提交將進入這兩個值。

所以，我做的是寫一些下面這段代碼以清除該文本框，如果選擇預定義的單選按鈕。

現在的問題是，說加載頁面，用戶立即想要輸入一個自定義的金額，10次9次他們更可能按下或單擊文本框內，而不是使用下一個單選按鈕但是因爲我在啓動時禁用了它，所以我不知道解決這個用戶體驗問題的最好方法是什麼。任何人都可以幫忙嗎？這是我到目前爲止：

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

Answer 1

關於這個？

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

Answer 2

我想你想要的是，當有人點擊文本輸入 所述無線事件已被觸發，輸入必須是焦點

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>