关于js里面表单disabled属性使用

今天在项目中无意发现在静态文件中的代码为

<input id="start_btn" type="button" value="启动" onclick="start()" >

随着项目的启动，后台拿来数据html页面代码变成

<input id="start_btn" type="button" value="启动" onclick="start()" disabled>

查阅js方法，发现是一句判断

function fun(){var t = document.getElementById('t').value;console.log(t);if(t == 1){document.getElementById("btn").disabled=false;} else{document.getElementById("btn").disabled=true;}   }

方法为页面初始化触发事件，故做了一下测试，探索`disabled`属性的作用

测试代码

<!DOCTYPE html>
<html>
<head><title>xxx</title>
</head>
<body><input type="text" name="t" id="t" /><input type="button" id="btn" name="btn" value="按钮" /><input type="button" id="btn1" onclick="fun()" name="btn" value="按钮1" />
</body>
<script type="text/javascript">function fun(){var t = document.getElementById('t').value;console.log(t);if(t == 1){document.getElementById("btn").disabled=false;} else{document.getElementById("btn").disabled=true;}}</script>
</html>

效果：在页面加载后，`按钮`和`按钮1`均处于可点击状态。当在input框中输入`1`时点击`按钮1`，`按钮`依旧可以点击。当输入`非1`时，点击`按钮1`，`按钮`处于不可点击状态。而当`按钮`处于不可点击状态时，再次输入`1`，点击`按钮1`，`按钮`重新恢复可点击状态。

故得出结论

- js添加disabled属性时，document.getElementById("btn").disabled=false，表示不添加disabled属性；
- document.getElementById("btn").disabled=true 为标签添加disabled属性；
- 当标签为<input type="button" id="btn" name="btn" value="按钮" disabled="true/false"/>时，均为不可点击

关于js里面表单disabled属性使用相关推荐

js和jq设置disabled属性与移除disabled属性
js操作: 代码如下: function disableElement(element,val){document.getElementById(element).disabled=val;} jQu ...
antd4 table里面表单赋值_vue的组件化——table表格的封装
什么是组件化--组件化是vue.js中的重要思想之一,也是vue的一个强大功能.它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用:任何的应用都可以被抽象成一个组件进行复用. ...
vue中使用js控制button的disabled属性
<button ref="btn">按钮</button> 最好不要使用this.$refs.btn.setAttribute('disabled',tru ...
工作56：element里面表单重置
elementUI里的button使用disabled属性
学习记录: 实现在table列表中控制二次点击按钮时对应行的button为不可点击,效果图如下: 1.el-table在表格按钮标签中定义disabled属性 HTML部分代码: <div id ...
本地html页面传递表单值,js实现两个页面表单传值并接收
js 实现两个页面表单传值并接收源码 A页面: function test(){ var s =document.getElementById("txt"); location.h ...
jquery设置表单元素只读_jquery设置元素readonly与disabled属性
jquery api中提供了对元素应用disabled和readonly属性的方法. 1,jquery 设置readonly属性例1, 复制代码代码示例: $('input').attr(&quo ...
js入门·表单详解一（修改表单属性，修改表单元素值）
实在javascript入门·Document对象入门讲解(访问表单,创建新页,获取页标题) 一文中,我们已经把表单的一些基本访问等弄清楚了,下面我们深入的学下表单的属性以及对表单元素的简单操作! 演 ...
js 动态添加 disabled 属性
如: *方式一: <div id = "NB"> </div> if( a ) {// 符合条件 a 移除 disabled 属性$('#NB').remo ...

关于js里面表单disabled属性使用

今天在项目中无意发现在静态文件中的代码为

随着项目的启动，后台拿来数据html页面代码变成

查阅js方法，发现是一句判断

方法为页面初始化触发事件，故做了一下测试，探索`disabled`属性的作用

测试代码

关于js里面表单disabled属性使用相关推荐

最新文章

热门文章

关于js里面表单disabled属性使用

今天在项目中无意发现在静态文件中的代码为

随着项目的启动，后台拿来数据html页面代码变成

查阅js方法，发现是一句判断

方法为页面初始化触发事件，故做了一下测试，探索disabled属性的作用

测试代码

关于js里面表单disabled属性使用相关推荐

最新文章

热门文章

方法为页面初始化触发事件，故做了一下测试，探索`disabled`属性的作用