Question

我想在页面上显示旅游套餐。我放了3个旅游套餐，但我会更多旅游套餐。 1.游览开始Res。按钮被禁用，因为我没有选择房间号和国家。（其真实情况）但是在2.和3. Tour Start Res。按钮启用。这些按钮应显示禁用状态。

你应该考虑;我将在页面上添加更多的旅游套餐，这些表格不应相互影响。请帮我。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
  
 
  <style type='text/css'>
    
  </style>
  


<script type='text/javascript'>//<![CDATA[ 
$(function(){
$('#submitorder').attr('disabled', 'disabled');

function updateFormEnabled() {
    if (verifyAdSettings()) {
        $('#submitorder').attr('disabled', '');
    } else {
        $('#submitorder').attr('disabled', 'disabled');
    }
}

function verifyAdSettings() {
    if ($('#ad_duration').val() != '' && $('#ad_type').val() != '') {
        return true;
    } else {
        return false
    }
}

$('#ad_duration').change(updateFormEnabled);

$('#ad_type').change(updateFormEnabled);
});//]]>  

</script>


</head>
<body>
<b>1. Tour</b><br>
<br>

  <form id="ad_form" method="post" action="../../form/form4.html">
  <input type="hidden" name="Code" value="TP5RMI1" />
    <p>
        <select id="ad_type" name="ad_type">
            <option value="" selected="selected">Room number</option>
            <option value="1">1</option>
            <option value="2">2</option>
			<option value="3">3</option>

        </select>
        <label for="ad_type" class="labelStrong">How many room(s) do you need?</label>
    </p>
    <p>
        <select id="ad_duration" name="ad_duration">
            <option value="" selected="selected">Select Country</option>
            <option value="GR">Germany</option>
            <option value="FR">France</option>
            <option value="EN">England</option>
        </select>
        <label for="ad_duration" class="labelStrong">Where are coming?</label>
    </p>
    <p><input type="submit" name="submit" value="Start Reservation" id="submitorder" />
    </p>
</form><br><br>
______________________________________________________________________________________________________________________<br>
<br>

<b>2. Tour</b><br>
<br>

  <form id="ad_form" method="post" action="../../form/form4.html">
  <input type="hidden" name="Code" value="TP5RMI2" />
    <p>
        <select id="ad_type" name="ad_type">
            <option value="" selected="selected">Room number</option>
            <option value="1">1</option>
            <option value="2">2</option>
			<option value="3">3</option>

        </select>
        <label for="ad_type" class="labelStrong">How many room(s) do you need?</label>
    </p>
    <p>
        <select id="ad_duration" name="ad_duration">
            <option value="" selected="selected">Select Country</option>
            <option value="GR">Germany</option>
            <option value="FR">France</option>
            <option value="EN">England</option>
        </select>
        <label for="ad_duration" class="labelStrong">Where are coming?</label>
    </p>
    <p><input type="submit" name="submit" value="Start Reservation" id="submitorder" />
    </p>
</form><br><br>
______________________________________________________________________________________________________________________<br>
<br>

<b>3. Tour</b><br>
<br>

  <form id="ad_form" method="post" action="../../form/form4.html">
  <input type="hidden" name="Code" value="TP5RMI3" />
    <p>
        <select id="ad_type" name="ad_type">
            <option value="" selected="selected">Room number</option>
            <option value="1">1</option>
            <option value="2">2</option>
			<option value="3">3</option>

        </select>
        <label for="ad_type" class="labelStrong">How many room(s) do you need?</label>
    </p>
    <p>
        <select id="ad_duration" name="ad_duration">
            <option value="" selected="selected">Select Country</option>
            <option value="GR">Germany</option>
            <option value="FR">France</option>
            <option value="EN">England</option>
        </select>
        <label for="ad_duration" class="labelStrong">Where are coming?</label>
    </p>
    <p><input type="submit" name="submit" value="Start Reservation" id="submitorder" />
    </p>
</form><br><br>

   
</body>


</html>

Answer 1

您有多个具有相同ID的元素。您不应该在页面上具有多个具有相同ID的元素。要么具有不同的ID，要么以某种方式对其进行操作，请为它们指定相同的类名。但是，不要在各种元素中使用相同的ID。

对三个按钮使用不同的ID，它会起作用。最初在你的html中禁用它们，然后在jQuery代码中启用它们。像，

<input type="submit" name="submit" value="Start Reservation" id="submitorder1" disabled/>
<input type="submit" name="submit" value="Start Reservation" id="submitorder2" disabled/>
<input type="submit" name="submit" value="Start Reservation" id="submitorder3" disabled/>

如果符合条件，则启用它们，

$('#submitorder1').attr('disabled', '');或$('#submitorder2').attr('disabled', '');等等。

表单禁用/启用按钮脚本不起作用

1 个答案: