根据保修选择设置未来的维修日期

Question

首先，我对Web开发真的很陌生，上周才学习了JS的基础知识。

我有一个项目，我有一个VIP状态，和3个保修类型。如果客户是VIP ->修复这个问题需要7天的时间。那么我有三种保修期——无保修期、定期保修期和延长保修期。没有-最多一个月的维修。常规-长达3周的维修。延长-最多两周的维修。

解决方案必须只包含javascript(还没有jQuery)。由于VIP复选框不是保修选择的一部分，我在连接它们时遇到了麻烦。

如果我的解释混淆了你-如果客户是VIP -保修选项应该是禁用的。因为它会自动获得更快的服务。如果VIP复选框没有被选中-我需要显示维修时间，如上图所示。

Thanks in advance

<input type="checkbox" id="isVIP" />VIP?

<select name="warranty" id="warranty">
<option disabled selected>Select warranty</option>
<option value="none">None</option>
<option value="regular">Regular</option>
<option value="Extended">Extended</option>

Answer 1

要实现您的要求，您需要添加一些逻辑。因为我们没有全面的背景，所以很难给你一个答复。

如果我理解正确的话，如果不是VIP的话，您希望能够选择保修。

给你一个概念，你可以用javaScript:

const checkbox = document.getElementById('isVIP');
const select = document.getElementById('warranty');
checkbox.addEventListener('change', () => {
if (checkbox.checked) {
// Disable options in select element
for (let i = 0; i < select.options.length; i++) {
select.options[i].disabled = true;
}
} else {
// Enable options in select element
for (let i = 0; i < select.options.length; i++) {
select.options[i].disabled = false;
}
}
});

<input type="checkbox" id="isVIP" />VIP?
<select name="warranty" id="warranty">
<option disabled selected>Select warranty</option>
<option value="none">None</option>
<option value="regular">Regular</option>
<option value="Extended">Extended</option>
</select>

希望有帮助