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

【问题标题】：Forms disable/enable buttons script doesn't work表单禁用/启用按钮脚本不起作用
【发布时间】：2015-07-16 19:51:35
【问题描述】：

我想在页面上显示旅游套餐。我放了 3 个旅游套餐，但我会放更多的旅游套餐。 1. 旅游开始水库。按钮被禁用，因为我没有选择房间号和国家。（它是真的）但在 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>

【问题讨论】：

标签： javascript jquery forms button

【解决方案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', ''); 等等。

【讨论】：

我没找到你？抱歉，您是什么意思？
你的意思是你不知道如何使用它们？我会在某个时候提供更改