其他单选按钮在使用 Javascript 函数根据 if 语句选择某些单选按钮后不可单击
Other radio buttons not clickable after using Javascript function to select certain Radio based on if statement
我正在研究一个汽车服务预订系统,有三种不同的车辆选择。我正在尝试将其编码为如果列出了一定数量的乘客,车辆会自动切换到可容纳更多人并禁用第一辆车的位置。
我已经完成了这项工作,但存在问题。我正在使用数组和函数来定义乘客数量。然后,我使用一个变量,该变量将这些函数吐出的值相加以创建乘客总数。然后我设置了一个 if 语句来说明如果值大于 4,请更改为此无线电输入并禁用第一个。
发生这种情况时出现问题,我无法再选择第三辆车选项,我不知道为什么。
我还尝试将总乘客值设置为如果小于 5,则自动选择第一辆车。这也行不通。
最终,我希望它以这样的方式行事,即如果选择超过 14 名乘客,用户会收到错误(这工作正常)。如果选择的乘客少于 5 人,则选择第一辆车。如果选择超过 4 名乘客,则选择第二辆车,第三辆车仍然是一个选项。如果选择的乘客超过 8 人,则第一辆车和第三辆车都将被禁用。
希望我的代码格式不会太差。我对Javascript相当陌生,并且一直在拼凑教程。这是表单中不起作用的部分的jsfiddle。
以下是Javascript代码:
var adults_teenagers2 = new Array();
adults_teenagers2["1"] = 1;
adults_teenagers2["2"] = 2;
adults_teenagers2["3"] = 3;
adults_teenagers2["4"] = 4;
adults_teenagers2["5"] = 5;
adults_teenagers2["6"] = 6;
adults_teenagers2["7"] = 7;
adults_teenagers2["8"] = 8;
adults_teenagers2["9"] = 9;
adults_teenagers2["10"] = 10;
adults_teenagers2["11"] = 11;
adults_teenagers2["12"] = 12;
adults_teenagers2["13"] = 13;
adults_teenagers2["14"] = 14;
function AmountAdultsTeenagers() {
var AdultsTeenagersNumberAmount = 0;
var theForm = document.forms["resForm"];
var AdultsTeenagersNumber = theForm.elements["adults_teenagers"];
AdultsTeenagersNumberAmount = adults_teenagers2[AdultsTeenagersNumber.value];
return AdultsTeenagersNumberAmount;
}
var children2 = new Array();
children2["0"] = 0;
children2["1"] = 1;
children2["2"] = 2;
children2["3"] = 3;
children2["4"] = 4;
children2["5"] = 5;
children2["6"] = 6;
children2["7"] = 7;
children2["8"] = 8;
function Amountchildren() {
var childrenNumberAmount = 0;
var theForm = document.forms["resForm"];
var childrenNumber = theForm.elements["children"];
childrenNumberAmount = children2[childrenNumber.value];
return childrenNumberAmount;
}
var infants2 = new Array();
infants2["0"] = 0;
infants2["1"] = 1;
infants2["2"] = 2;
infants2["3"] = 3;
infants2["4"] = 4;
infants2["5"] = 5;
infants2["6"] = 6;
infants2["7"] = 7;
infants2["8"] = 8;
function Amountinfants() {
var infantsNumberAmount = 0;
var theForm = document.forms["resForm"];
var infantsNumber = theForm.elements["infants"];
infantsNumberAmount = infants2[infantsNumber.value];
return infantsNumberAmount;
}
function calculateTotal() {
var over = AmountAdultsTeenagers() + Amountchildren() + Amountinfants();
if(over>'14')
{
alert('Sorry, no vehicle can accomodate more than 14 passengers.');
document.getElementById("firstPageSubmit").disabled = true;
}
else {
document.getElementById("firstPageSubmit").disabled = false;
}
if(over<'5') {
document.getElementById("towncar").checked = true;
}
if(over>'4')
{
document.getElementById("towncar").disabled = true;
document.getElementById("stretch_limousine").disabled = false;
document.getElementById("passenger_van").checked = true;
}
else {document.getElementById("towncar").disabled = false;
}
}
和 HTML:
<form method="post" class="res_form" id="resForm" name="res_form" onSubmit="return quoteCheck();">
<ul>
<li id="steps">Step 1 of 3 - Select Type of Service/Get Quote</li>
<li class="form_notice"><span>Reservations must be at least 48 hrs prior for towncars and 72 hrs for any other vehicle.</span></li>
<li><fieldset class="res_form_fs" id="passengers">
<legend>Passengers:</legend>
<label for="adults_teenagers" class="selectLabel">Adults/Teenagers:
<select name="adults_teenagers" id="adults_teenagers" onchange="calculateTotal()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select></label>
<label for="children" class="selectLabel">Children:
<select name="children" id="children" onchange="calculateTotal()">
<option value="0">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select></label>
<label for="infants" class="selectLabel">Infants:
<select name="infants" id="infants" onchange="calculateTotal()">
<option value="0">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select></label>
</fieldset>
</li>
<li>
<fieldset class="res_form_fs">
<legend>Select Vehicle:</legend>
<p class="radioT"><input type="radio" value="Towncar" onclick="calculateTotal()" name="vehicle" id="towncar" class="radio" unchecked /></p><p class="nonradioT"><span class="radioOption"><label for="towncar">Towncar</label></span></p><br />
<p class="radioT"><input type="radio" value="Passenger Van" onclick="calculateTotal()" name="vehicle" id="passenger_van" class="radio" unchecked /></p><p class="nonradioT"><span class="radioOption"><label for="passenger_van">Passenger Van</label></span></p><br />
<p class="radioT"><input type="radio" value="Stretch Limousine" onclick="calculateTotal()" name="vehicle" id="stretch_limousine" class="radio" unchecked /></p><p class="nonradioT"><span class="radioOption"><label for="stretch_limousine">Stretch Limousine</label></span></p>
</fieldset>
</li>
<li><input name="submit" type="submit" id="firstPageSubmit" class="ressubmitButton" value="Continue to Make Reservation" /></li>
</ul>
</form>
在这里,我将所有选择选项的名称更改为相同,现在它可以工作了。请参阅下面的JSFiddle:
<select name="adults_teenagers">
http://jsfiddle.net/ketan156/cthbg27h/8/
编辑:
更改 if 条件:以下是新的 JSFiddle:
http://jsfiddle.net/ketan156/cthbg27h/10/
可以吗? 根据我的理解,你喜欢得到它。
正如你需要的那样,我编辑了JSFiddle:
http://jsfiddle.net/ketan156/cthbg27h/11/
- 根据页面加载时的单选按钮选择显示某些字段
- Ng点击记住单选按钮选择
- Angular未更新单选按钮选择
- 阅读JS中的单选按钮选择
- JQuery IE11 单选按钮选择器
- 确认单选按钮选择
- 贝宝表单问题的单选按钮选择
- 使用javascript在单选按钮选择上加载URL
- 显示基于多个单选按钮选择的图像
- 基于输入值的单选按钮选择
- 将域类id返回到由单选按钮选择的控制器
- 无法更改单选按钮选择 - KnockoutJS
- 单选按钮选择列表框更改并将 NULL 值传递给每个列表框
- 用户在Javascript的帮助下,仅通过单选按钮选择一个付款方式(信用卡)
- 基于多个单选按钮选择显示或隐藏元素
- 如何根据单选按钮选择在表中切换多个输入
- 无法更改单选按钮选择
- 提交页面而不为所需单选按钮选择值
- 使用基于单选按钮选择的 jquery 将表格单元格添加到行尾
- j查询动态验证单选按钮选择