0

我有一个表格，其中包含要发送到 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);

});
4

3 回答 3

3

尝试这个：

$("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问题是您对收音机和文本输入都使用相同的。
  • 请始终id在 HTML DOM 中使用唯一的。

小提琴

于 2013-04-25T18:03:13.937 回答
1

您不能（或至少不应该）这样做，因为 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

于 2013-04-25T18:04:48.647 回答
0

由于 ids 应该是唯一的，因此您必须使用其他方法来获取值，我建议使用 data 属性

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

});
于 2013-04-25T18:04:51.240 回答