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

你不能（或者至少不应该）这样做，因为ID应该是唯一的。此外，隐藏的输入将以表格提交，无论它们是否可见。

尝试这样的事情。但请注意，用户可以更改这些数字，如果安全性很重要，则不应使用此技术。相反，如果选择“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);

});

根据相应的单选按钮启用输入

3 个答案: