问题描述
我想在页面上显示旅游套餐。 我放了3个旅游套票，但我会增加一些旅游套票。 1. Tours Start 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>
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', '');
等等。