根據相應的單選按鈕啓用輸入

Question

我有一個表單，其中有多個選項可以將金額發送到CC處理。我希望用戶選擇支付類型，然後激活金額輸入字段。我試圖通過設置單選按鈕的ID來對應金額輸入字段。如何根據所選單選按鈕啓用輸入金額字段？

HTML

<input name="doantion-type" id="general" type="radio" value="General" /> 
<input name="doantion-type" id="occasion" type="radio" value="Occasion" /> 
<input name="doantion-type" id="building" type="radio" value="Building" /> 
<input name="doantion-type" id="program" type="radio" value="Program" /> 

<input id="general" autocomplete="off" class="input required" type="text" size="30" name="Amount"> 

<input id="occasion" autocomplete="off" class="input required" type="text" size="30" name="Amount"> 
<input id="building" type="hidden" value="1000" name="Amount"> 
<input id="program" type="hidden" value="180" name="Amount"> 

jQuery的

$("input[name=Amount]").prop('disabled', true); 

$('input[name=doantion-type]:radio').click(function() { 
var selectedDonation = '#' + $(this).attr('id'); 
//alert(selectedDonation); 
$(selectedDonation).prop('disabled', false); 

}); 

Answer 1

試試這個：

$("input[name=Amount]").prop('disabled', true); 

$('input:radio[name=doantion-type]').change(function() { 
    $("input[name=Amount]").prop('disabled', true); 
    var selectedDonation = '#' + $(this).attr('id') + '2'; 
    $(selectedDonation).prop('disabled', false); 
}); 

• 問題是您正在使用相同的id兩個無線電&文本輸入。
• 請務必在HTML DOM中使用唯一的id。

FIDDLE

Answer 2

你不能（或至少不應該）做這種方式，因爲標識應該是唯一的。此外，隱藏的輸入將以無論是否可見的形式提交。

嘗試類似這樣的東西。但是，請注意，數字可以由用戶更改，如果安全性很重要，則不應使用此技術。相反，如果選擇「building」或「program」，則應在服務器端設置「Amount」的值。

http://jsfiddle.net/mblase75/d2Lcd/

HTML：

General 
<input name="donation-type" data-amount="" id="general" type="radio" value="General" /> 
Occasion 
<input name="donation-type" data-amount="" id="occasion" type="radio" value="Occasion" /> 
Building 
<input name="donation-type" data-amount="1000" id="building" type="radio" value="Building" /> 
Program 
<input name="donation-type" data-amount="180" id="program" type="radio" value="Program" /> 

<br> 
Amount: 
<input autocomplete="off" id="amount" class="input required" type="text" size="30" name="Amount"> 

JS：

$('input[name=donation-type]:radio').change(function() { 
    var amt = $(this).data('amount'); // from the data-amount attribute 
    $('#amount').val(amt).prop('disabled',!!amt); // !! converts to Boolean 
}); 

http://api.jquery.com/data

Answer 3

由於ID應該是唯一的，你必須使用一些其他的手段來獲取值，我建議數據屬性

<input name="doantion-type" id="general" data-id="general-amount" type="radio" value="General" /> 
<input name="doantion-type" id="occasion" data-id="occasion-amount" type="radio" value="Occasion" /> 
<input name="doantion-type" id="building" data-id="building-amount" type="radio" value="Building" /> 
<input name="doantion-type" id="program" data-id="program-amount" type="radio" value="Program" /> 

<input id="general" autocomplete="off" class="input required" type="text" size="30" name="Amount"> 

<input id="occasion-amount" autocomplete="off" class="input required" type="text" size="30" name="Amount"> 
<input id="building-amount" type="hidden" value="1000" name="Amount"> 
<input id="program-amount" type="hidden" value="180" name="Amount"> 

$('input[name=doantion-type]:radio').click(function() { 
    var selectedDonation = '#' + $(this).data('id'); 
    //alert(selectedDonation); 
    $("input[name=Amount]").prop('disabled', true); 
    $(selectedDonation).prop('disabled', false); 

});