表单会影响其他表单和提交按钮禁用/启用 - Forms affect other forms and submit button Disable/enable

我应该组成一个有更多包的页面。首先；访问者必须选择个人号码，选择"开始"按钮后将启用，当访问者按下按钮时，使用get方法重定向到form4.html。当我放入3个表单时，所有表单都会影响其他表单。请帮助我

<!DOCTYPE html>
<html lang="en">
	<head>
		<title></title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js"></script>
		
	<!----Drop Down And Submit - Start----->	
		<script type='text/javascript'>//<![CDATA[ 
$(function(){
$(document).ready(function() {
//Start Buttons
    $(".nextbutton").button({ disabled: true });
    
    $('.dropdown').change(function() {
        if ($('.dropdown').val() == 0) {
          $(".nextbutton").button({ disabled: true });
        } else {
          $(".nextbutton").button({ disabled: false });
        }
    });
});
});//]]>  
</script>
	<!----Drop Down And Submit - End----->
	        <script type="text/javascript">
        function submitform()
        {
            document.forms["drop_list"].submit();
        }
        </script>
	</head>
	<body>
		
							
<h3>PACKAGE - 1 </h3>
							<form name="drop_list" action="../../form/form4.html" method="get" class="j-forms j-multistep">
<form name="drop_list" action="../../form/form4.html" method="get" class="j-forms j-multistep">
	<select name="select" class="dropdown">
			<option value=''>Person Number</option>
            <option value="Person-1">1</option>
            <option value="Person-2">2</option>
            <option value="Person-3">3</option>
            <option value="Person-4">4</option>
            <option value="Person-5">5</option>
            <option value="Person-6">6</option>
            <option value="Person-7">7</option>
            <option value="Person-8">8</option>
            <option value="Person-9">9</option>
          	</select><br><br>
		  <input class="nextbutton" value="Start" type="button" onClick="submitform()"></form>
					  
	<br>_____________________________________________________________________<br>
			
							
<h3>PACKAGE - 2 </h3>
<form name="drop_list" action="../../form/form4.html" method="get" class="j-forms j-multistep">
	<select name="select" class="dropdown">
			<option value=''>Person Number</option>
            <option value="Person-1">1</option>
            <option value="Person-2">2</option>
            <option value="Person-3">3</option>
            <option value="Person-4">4</option>
            <option value="Person-5">5</option>
            <option value="Person-6">6</option>
            <option value="Person-7">7</option>
            <option value="Person-8">8</option>
            <option value="Person-9">9</option>
          	</select><br><br>
		  <input class="nextbutton" value="Start" type="button" onClick="submitform()"></form>
		  
<br>_____________________________________________________________________<br>
	  
					
<h3>PACKAGE - 3 </h3>
	<form name="drop_list" action="../../form/form4.html" method="get" class="j-forms j-multistep">
	<select name="select" class="dropdown">
			<option value=''>Person Number</option>
            <option value="Person-1">1</option>
            <option value="Person-2">2</option>
            <option value="Person-3">3</option>
            <option value="Person-4">4</option>
            <option value="Person-5">5</option>
            <option value="Person-6">6</option>
            <option value="Person-7">7</option>
            <option value="Person-8">8</option>
            <option value="Person-9">9</option>
          	</select><br><br>
		  <input class="nextbutton" value="Start" type="button" onClick="submitform()"></form>
					  
				
	
	</body>
</html>

正如我在对您的问题的评论中所说，您的问题之一是您实际上同时更改了class.nextbutton的所有按钮。

您可以将更改功能更改为

  $('.dropdown').change(function() {
    $(this.form).find('.nextbutton').button({ disabled: this.value === '' });
  });

它所做的是使用这个，它是触发函数的元素。通过使用this.form，我得到了那个元素的形式。然后我只更改当前表单上的按钮。

我还去掉了if-语句，因为这是一个布尔表达式，禁用的属性也是一个布尔值。