使用Javascript函数根据if语句选择特定单选按钮后,其他单选按钮不可单击

使用Javascript函数根据if语句选择特定单选按钮后,其他单选按钮不可单击,javascript,jquery,html,forms,radio,Javascript,Jquery,Html,Forms,Radio,我正在开发一个汽车服务预订系统,有三种不同的车辆选择。我试图将其编码为,如果列出了一定数量的乘客,车辆会自动切换到可容纳更多人的位置,并禁用第一辆车 我已经做到了这一点,但也存在一些问题。我使用数组和函数来定义乘客数量。然后,我使用一个变量,将这些函数输出的值相加,以创建乘客总数。然后我设置了一个if语句,表示如果值大于4,则更改为该无线电输入并禁用第一个 发生这种情况时,问题就出现了。我无法再选择第三个车辆选项,我不知道为什么 我还尝试将总乘客值设置为,如果小于5,则自动选择第一辆车。这也不管

我正在开发一个汽车服务预订系统,有三种不同的车辆选择。我试图将其编码为,如果列出了一定数量的乘客,车辆会自动切换到可容纳更多人的位置,并禁用第一辆车

我已经做到了这一点,但也存在一些问题。我使用数组和函数来定义乘客数量。然后,我使用一个变量,将这些函数输出的值相加,以创建乘客总数。然后我设置了一个if语句,表示如果值大于4,则更改为该无线电输入并禁用第一个

发生这种情况时,问题就出现了。我无法再选择第三个车辆选项,我不知道为什么

我还尝试将总乘客值设置为,如果小于5,则自动选择第一辆车。这也不管用

最终,我希望它能够这样做:如果选择了超过14名乘客,用户将收到一个错误(这工作正常)。如果选择的乘客少于5名,则选择第一辆车。如果选择了4名以上的乘客,则选择第二辆车,第三辆车仍然是一个选项。如果选择了8名以上的乘客,则第一辆和第三辆车都将禁用

希望我的代码没有格式太差。我对Javascript相当陌生,一直在拼凑教程。这是表单中不起作用的部分的一部分

以下是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;
}
}
var成人_青少年2=新数组();
成人和青少年2[“1”]=1;
成人和青少年2[“2”]=2;
成人和青少年2[“3”]=3;
成人和青少年2[“4”]=4;
成人和青少年2[“5”]=5;
成人和青少年2[“6”]=6;
成人和青少年2[“7”]=7;
成人和青少年2[“8”]=8;
成人和青少年2[“9”]=9;
成人和青少年2[“10”]=10;
成人和青少年2[“11”]=11;
成人和青少年2[“12”]=12;
成人和青少年2[“13”]=13;
成人和青少年2[“14”]=14;
函数amountadults(){
var AdultsTeenagersNumberAmount=0;
var theForm=document.forms[“resForm”];
var AdultsTeenagersNumber=形式元素[“成人和青少年”];
AdultsTeenagersNumberAmount=成年人_青少年2[AdultsTeenagersNumber.value];
返回成人登月数;
}
var children2=新数组();
儿童2[“0”]=0;
儿童2[“1”]=1;
儿童2[“2”]=2;
儿童2[“3”]=3;
儿童2[“4”]=4;
儿童2[“5”]=5;
儿童2[“6”]=6;
儿童2[“7”]=7;
儿童2[“8”]=8;
函数Amountchildren(){
var childrenNumberAmount=0;
var theForm=document.forms[“resForm”];
var childrenNumber=form.elements[“children”];
childrennumbermount=children2[childrenNumber.value];
返回childrenNumberAmount;
}
var infants2=新数组();
婴儿2[“0”]=0;
婴儿2[“1”]=1;
婴儿2[“2”]=2;
婴儿2[“3”]=3;
婴儿2[“4”]=4;
婴儿2[“5”]=5;
婴儿2[“6”]=6;
婴儿2[“7”]=7;
婴儿2[“8”]=8;
函数Amountinfants(){
var infantsNumberAmount=0;
var theForm=document.forms[“resForm”];
var infantsNumber=形式元素[“婴儿”];
infantsNumberAmount=infants2[infantsNumber.value];
返回婴儿数;
}
函数计算器总计(){
var over=amountadultsTeventies()+Amountchildren()+Amountinfants();
如果(超过'14')
{
警报(“对不起,任何车辆不能容纳超过14名乘客”);
document.getElementById(“firstPageSubmit”).disabled=true;
}
否则{
document.getElementById(“firstPageSubmit”).disabled=false;
}
如果(超过'4')
{
document.getElementById(“towncar”).disabled=true;
document.getElementById(“stretch_limousine”).disabled=false;
document.getElementById(“乘客车”).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>

  • 第1步,共3步-选择服务类型/获取报价
  • 预订必须至少提前48小时(适用于城镇车辆)和72小时(适用于任何其他车辆)
  • 乘客: 成人/青少年: 1. 2. 3. 4. 5. 6. 7. 8. 9 10 11 12 13 14 儿童: 没有一个 1. 2. 3. 4. 5. 6. 7. 8. 婴儿: 没有一个 1. 2. 3. 4. 5. 6. 7. 8.
  • 选择车辆:

    Towncar


    乘用车 伸缩式豪华轿车


在这里,我将name all select选项更改为相同,现在它可以工作了。请参见下面的JSFIDLE:

<select name="adults_teenagers">

编辑:

if条件的更改:以下是新的JSFIDLE:

<select name="adults_teenagers">

可以吗?据我所知,你喜欢得到它

根据需要,我编辑了JSFIDLE:


现在,我可以选择每个选项,但脚本的任何部分都不起作用。剧本还适合你吗?是的,这正是我想做的,谢谢你!但问题仍然存在,如果有6到8名乘客,我仍然无法选择第三辆车。如果选择了6名成年人,选项将更改为客货两用车,但我无法选择他们应该能够选择的加长型豪华轿车。这对我来说也没什么意义,因为在单选按钮点击事件中,你调用calculateTotal()函数,它会检查乘客总数,这样它会将值更改为TownCar。是的