【发布时间】：2019-07-22 18:20:27
【问题描述】：
我有两个单选按钮：
-
fixed_price_option（默认选中。） -
variable_price_option（禁用默认）
我也有两种类型的输入：
-
fixed_price_input（默认情况下可见。仅出现一次。） -
variable_price_input（代码中不存在，因为它必须动态添加。出现一次或多次。）
When fixed_price_option is selected an input called fixed_price_input should be visable and included when later running .serialize().
当fixed_price_option 被选中时，variable_price_input 不应该是可见的或在以后运行 .serialize() 时包含在内。
variable_price_option 应仅在两个日期输入之间的差异超过 12 个月时才可选。 （这个我已经解决了）
当variable_price_option被选中时应该有一个更长 variable_price_input's可见，因为两个日期输入之间的全年（即durymonths + 1）。在稍后运行 .serialize() 时还需要包含它们，因此它们需要具有类似 price_year_1、price_year_2、price_year_3 等名称，具体取决于两个日期输入之间的整年数。
当variable_price_option 被选中时，fixed_price_input 在稍后运行 .serialize() 时不应可见或包含。
我已经提供了代码。缺少的逻辑需要放在js代码底部的事件处理函数中。
关于如何解决这个问题的任何建议？
-- 更新--
我的问题需要澄清：
我正在努力的是根据选中的单选按钮来切换两种输入（fixed_price_input 和variable_price_input）的存在。隐藏/显示它们是不够的，因为我稍后会使用 .serialize() 。我应该以某种方式使用 .detach() 和 .append() 吗？
我还在为如何创建比开始日期和结束日期之间的年数多一个variable_price_input 而苦苦挣扎。我应该以某种方式使用 <template> 或 .clone() 吗？
$(document).ready(function() {
$("#inputStartDate, #inputEndDate").change(function() {
if ($('#inputStartDate').val() && $('#inputEndDate').val()) {
var startDate = moment($('#inputStartDate').val());
var endDate = moment($('#inputEndDate').val());
var durationMonths = endDate.diff(startDate, 'months');
$('#durationMonths').text(durationMonths);
var durationYears = endDate.diff(startDate, 'years');
$('#durationYears').text(durationYears);
if (duration > 12) {
$('#variablePriceOption').prop("disabled", false);
} else {
$('#variablePriceOption').prop("disabled", true);
}
}
});
$('#variablePriceOption, #fixedPriceOption').change(function() {
if (this.value == 'fixedPrice') {
//Logic needed
} else if (this.value == 'variablePrice') {
//Logic needed
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<div class="container">
<div class="row mt-3">
<div class="col">
<div class="form-group">
<label for="inputStartDate">Start date</label>
<input type="date" class="form-control" id="inputStartDate" name="land_contract_start_date">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="inputEndDate">End date</label>
<input type="date" class="form-control" id="inputEndDate" name="land_contract_end_date">
</div>
</div>
</div>
<div class="text-center">Months between selected dates = <span id="durationMonths"></span>. Years between selected dates = <span id="durationYears"></span>.
</div>
<div class="form-group">
<label for="inputPriceModel">Price model</label>
<div id="inputPriceModel">
<div class="form-check">
<input class="form-check-input" type="radio" name="inputPriceModel" id="fixedPriceOption" value="fixedPrice" required checked="checked">
<label class="form-check-label" for="fixedPriceOption">
Fixed price
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="inputPriceModel" id="variablePriceOption" value="variablePrice" disabled="disabled">
<label class="form-check-label" for="variablePriceOption">
Variable price
</label>
</div>
</div>
</div>
<div class="form-group fixedPriceModelFormGroup">
<label for="fixed_price_input">Fixed price amount</label>
<div class="input-group">
<input type="number" class="form-control" id="fixed_price_input" name="land_contract_fixed_annual_price">
<div class="input-group-append">
<span class="input-group-text">$</span>
</div>
</div>
</div>
</div>【问题讨论】：
-
我现在已经更新/澄清了我的问题。
-
您可以使用
.detach()，但如果需要再次创建对象数据，您需要将其存储在某个地方。 -
@Twisty 谢谢！我正在考虑以某种方式使用此解决方案，但我无法弄清楚在这种情况下如何实现它：w3schools.com/jquery/….
标签： javascript jquery html