表格的输入框值不应大于表格外的输入框

Question

您好我已经开发了一个表格，其中表格的输入框值不应大于表格外的输入框。

<form>
 <div class="form-group">
                              <label class="label1 col-md-4">Total number of sanctioned seats
                               <span class="required"> * </span>
                              </label>
							  <div class="col-md-7">
                                <input type="text" class="form-control" id="sanctionedSeatsSummary">
                              </div>
						  </div>
						  
                                         						 <table  class="eduleveles table table-bordered table-hover">
								 
    <thead> 
        <th></th>
        <th>Faculty</th>
		<th>Enter sanctioned seats</th>
        
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="checkbox" name="Check" class="cbxenable">
            </td>
            <td>
               
            </td>
			<td>
                <input type="text" class="form-control seats" name="seats">
            </td>
 
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="Check" class="cbxenable">
            </td>
            <td>
               
            </td>
			<td>
                <input type="text" class="form-control seats" name="seats">
            </td>
 
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="Check" class="cbxenable">
            </td>
            <td>
               
            </td>
			<td>
                <input type="text" class="form-control seats" name="seats">
            </td>
 
        </tr>
    </tbody>
</table>
</form>

在上面的jsfiddle中，所有输入的SANCHTIONED SEATS总和不会大于onchange中的“输入受制裁席位的总数”。

Answer 1

你需要使用我在小提琴中提到的jquery keyup事件。

请检查这个小提琴

如果三个受制裁席位的总和大于总数，我只是将文本框值设为空白。

如果你使用总文本框

，我也会清除3个文本框

Open this link：https://jsfiddle.net/5y6na3wr/7/

Answer 2

$(document).ready(function(){
    $(".seats").on('keyup',function(){
    	var total = parseInt(0) ;
    	$( ".seats" ).each(function( index ) {
        	if($(this).val()){
        		total = total + parseInt($(this).val());
            } 
		});
		if(total > $("#sanctionedSeatsSummary").val()){
			alert("total sanctioned Seats are greater then given sanctioned Seats");
		}
        
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
	<div class="form-group">
		<label class="label1 col-md-4">Total number of sanctioned seats
		<span class="required"> * </span>
		</label>
		<div class="col-md-7">
			<input type="text" class="form-control" id="sanctionedSeatsSummary">
		</div>
	</div>

<table  class="eduleveles table table-bordered table-hover">
	<thead> 
		<th></th>
		<th>Faculty</th>
		<th>Enter sanctioned seats</th>
	</thead>
	<tbody>
	<tr>
		<td>
			<input type="checkbox" name="Check" class="cbxenable">
		</td>
		<td>
		</td>
		<td>
			<input type="text" class="form-control seats" name="seats">
		</td>
	</tr>
	<tr>
		<td>
			<input type="checkbox" name="Check" class="cbxenable">
		</td>
		<td>
		</td>
		<td>
			<input type="text" class="form-control seats" name="seats">
		</td>
	</tr>
	<tr>
		<td>
			<input type="checkbox" name="Check" class="cbxenable">
		</td>
		<td>
		</td>
		<td>
			<input type="text" class="form-control seats" name="seats">
		</td>
	</tr>
	</tbody>
</table>
</form>

Answer 3

检查以下代码段

＆＃13;

＆＃13;

$(document).ready(function(){
  var ttl, val;
  
  $("input[name=seats]").on('keyup', function(){
    val = 0;
    
    $("input[name=seats]").each(function(){
      if(parseInt($(this).val().trim()) > 0)
      val += parseInt($(this).val().trim());
    });
    
    ttl = parseInt($("#sanctionedSeatsSummary").val().trim());

    if(val > ttl)
      alert("your alert");
    
  });

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
 <div class="form-group">
                              <label class="label1 col-md-4">Total number of sanctioned seats
                               <span class="required"> * </span>
                              </label>
							  <div class="col-md-7">
                                <input type="text" class="form-control" id="sanctionedSeatsSummary">
                              </div>
						  </div>
						  
                                         						 <table  class="eduleveles table table-bordered table-hover">
								 
    <thead> 
        <th></th>
        <th>Faculty</th>
		<th>Enter sanctioned seats</th>
        
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="checkbox" name="Check" class="cbxenable">
            </td>
            <td>
               
            </td>
			<td>
                <input type="text" class="form-control seats" name="seats">
            </td>
 
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="Check" class="cbxenable">
            </td>
            <td>
               
            </td>
			<td>
                <input type="text" class="form-control seats" name="seats">
            </td>
 
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="Check" class="cbxenable">
            </td>
            <td>
               
            </td>
			<td>
                <input type="text" class="form-control seats" name="seats">
            </td>
 
        </tr>
    </tbody>
</table>
</form>

＆＃13;

＆＃13;

＆＃13;