使输入[数字]字段依赖于JQuery的另一个输入[数字]字段

时间:2017-03-31 21:23:35

标签: javascript jquery

每个input字段都应该依赖于总测验标记(input字段)。我只想设置一个attribute: max,它应该是less than or equal to总测验标记。 我附上快照&我确定它会很清楚。 enter image description here

&安培;我还附上了我的HTML代码:

<form action="../controllers/classroom.php" method="POST">      
    <input type="number" class="form-control" id="totalMark" name="totalMark" placeholder="Enter quiz mark" required>
    <div class="row">
    <?php
        $count=0;
        $query4="SELECT * FROM enrollments WHERE classId='{$classId}'";
        $res4=mysqli_query($connection, $query4);

        while($row=mysqli_fetch_array($res4)){
            $count++;
    ?>
            <div class="col-md-2">#<?php echo $count; ?></div>
            <div class="col-md-6"><?php echo ucwords(getUser($row['userId'])['name']); ?></div>
            <div class="col-md-4"><input type="number" class="form-control" name="user[<?php echo $row['id']; ?>]" placeholder="Enter marks" required>
            </div>
    <?php } ?>
    </div>
    <button type="submit" name="quiz-marks" class="btn btn-primary">Submit</button>
</form>

我想进行实时验证。感谢

1 个答案:

答案 0 :(得分:2)

最简单的方法是在change输入上侦听#totalMark事件,然后更改max属性。为了简洁起见,我使用了jQuery,但我确定你可以使用vanilla javascript。

$(function(){
	$('#totalMark').change(function(){
		$('.form-control:not(#totalMark)').prop('max',this.value)
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type="number" class="form-control" id="totalMark" name="totalMark" value="20" placeholder="Enter quiz mark" required>
    <input type="number" class="form-control" max="20" required>
    <input type="number" class="form-control" max="20" required>
    <input type="number" class="form-control" max="20" required>
</form>