jquery点击按钮更改input的value值

最新推荐文章于 2022-03-10 15:04:14 发布

蓝焰鱼

最新推荐文章于 2022-03-10 15:04:14 发布

阅读量8.6k

点赞数 1

分类专栏：网页开发文章标签： html jquery

本文链接：https://blog.csdn.net/weixin_43488742/article/details/105577730

版权

网页开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用jQuery实现点击按钮后，将input字段的value值限定在8到15之间，并且可以设置input为只读，禁止用户手动修改。

摘要由CSDN通过智能技术生成

jquery点击按钮更改input的value值

value值得取值范围为：8~15
readonly=“readonly”：设置输入框的值无法手动更改

效果：

源码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<script src="./ceshi/jquery-1.12.2.js"></script>
	<title>jquery点击按钮更改input的value值</title>
</head>
<body>
    <span><button type="button" style="height: 40px;" id="btn1">-</button></span>
    <input type="text" name="chkfile" style="height: 34px; text-align: center;" class="text" min="8" step="1" max="32" value="8" placeholder="8" readonly="readonly" id="v1">
    <span><button type="button" style="height: 40px;" id="btn2">+</button></span>
<script>
  // -按钮：
  $('#btn1').click(function(){
    var num = $("#v1").val();
    if (num <16 && num>8) {
      $('#v1').val(num-1);
    }else{
      $('#v1').val(num);
    }
  });
  // +按钮：
  $('#btn2').click(function(){
    var num = $("#v1").val();
    if (num <15 && num>7) {
      var bl = Number(num)+1;
      $('#v1').val(bl);
    }else{
      $('#v1').val(num);
    }
  });
</script>
</body>
</html>