如果输入类型编号大于1,则添加必需属性

时间:2017-06-23 11:20:09

标签: javascript jquery css

如果我的输入类型编号字段超过一个,我只想在我的文件提交按钮上添加必需的属性。

我在google上搜索过,我尝试了一些代码但没有工作,有人能指导我正确的方向吗?

$(document).ready(function(){
$('input[name="reg"]').change(function () {
    if($("#reg").is('>1')) {
        $('#up').attr('required', true);
    } else {
        $('#up').removeAttr('required');
    }
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
</head>
<style type="text/css">

</style>
<body>
<div class="container">
<form method="post">
<div class="form-group">
	<label>Registrations</label>
	<div class="input-group">
	<input required="" type="number" class="form-control" name="reg" id="reg" value="" />
	</div>
</div>

<div class="form-group">
<div class="input-group">
<input type="file" name="upload" id="up">
</div>
</div>

<input type="submit" name="submit" value="submit" class="btn btn-primary">
</form>
</div>
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- begin snippet: js hide: false console: true babel: false -->

4 个答案:

答案 0 :(得分:3)

&#13;
&#13;
$(document).ready(function() {
  $('input[name="reg"]').change(function() {
    if ($(this).val() > 1) {
      $('#up').attr('required', true);
      alert('Error')
    } else {
      $('#up').removeAttr('required');
      
    }

    console.log($("#up").attr("required"));
  });
});
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
</head>
<style type="text/css">

</style>

<body>
  <div class="container">
    <form method="post">
      <div class="form-group">
        <label>Registrations</label>
        <div class="input-group">
          <input required="" type="number" class="form-control" name="reg" id="reg" value="" />
        </div>
      </div>

      <div class="form-group">
        <div class="input-group">
          <input type="file" name="upload" id="up">
        </div>
      </div>

      <input type="submit" name="submit" value="submit" class="btn btn-primary">
    </form>
  </div>
</body>

</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- begin snippet: js hide: false console: true babel: false -->
&#13;
&#13;
&#13;

答案 1 :(得分:2)

而不是$("#reg").is('>1')你应该使用  $(this).val() > 1

&#13;
&#13;
$(document).ready(function() {
  $('input[name="reg"]').change(function() {
    if ($(this).val() > 1) {
      $('#up').attr('required', true);
    } else {
      $('#up').removeAttr('required');
    }

    console.log($("#up").attr("required"));
  });
});
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
</head>
<style type="text/css">

</style>

<body>
  <div class="container">
    <form method="post">
      <div class="form-group">
        <label>Registrations</label>
        <div class="input-group">
          <input required="" type="number" class="form-control" name="reg" id="reg" value="" />
        </div>
      </div>

      <div class="form-group">
        <div class="input-group">
          <input type="file" name="upload" id="up">
        </div>
      </div>

      <input type="submit" name="submit" value="submit" class="btn btn-primary">
    </form>
  </div>
</body>

</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- begin snippet: js hide: false console: true babel: false -->
&#13;
&#13;
&#13;

答案 2 :(得分:2)

您需要检查输入值:

$(document).ready(function(){
$('input[name="reg"]').change(function () {
    if($("#reg").val() > 1) {
        $('#up').attr('required', true);
    } else {
        $('#up').removeAttr('required');
    }
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
</head>
<style type="text/css">

</style>
<body>
<div class="container">
<form method="post">
<div class="form-group">
	<label>Registrations</label>
	<div class="input-group">
	<input required="" type="number" class="form-control" name="reg" id="reg" value="" />
	</div>
</div>

<div class="form-group">
<div class="input-group">
<input type="file" name="upload" id="up">
</div>
</div>

<input type="submit" name="submit" value="submit" class="btn btn-primary">
</form>
</div>
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- begin snippet: js hide: false console: true babel: false -->

答案 3 :(得分:0)

使用$("#reg").val() > 1 val()给出您输入的文本框的值

&#13;
&#13;
$(document).ready(function(){
$('input[name="reg"]').change(function () {
    if($("#reg").val() > 1) {
        $('#up').attr('required', true);
    } else {
        $('#up').removeAttr('required');
    }
});
});
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
</head>
<style type="text/css">

</style>
<body>
<div class="container">
<form method="post">
<div class="form-group">
	<label>Registrations</label>
	<div class="input-group">
	<input required="" type="number" class="form-control" name="reg" id="reg" value="" />
	</div>
</div>

<div class="form-group">
<div class="input-group">
<input type="file" name="upload" id="up">
</div>
</div>

<input type="submit" name="submit" value="submit" class="btn btn-primary">
</form>
</div>
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- begin snippet: js hide: false console: true babel: false -->
&#13;
&#13;
&#13;