在网页中进行操作的时候,一个常规动作是在表单中点击按钮,但是经常会出现点了按钮以后没有反应,这个时候,
用户通常会连点几次,这个可能破坏你原来的预想,例如会导致多次提交。
通过将按钮设置为不可用可以防止这类事情发生,也可以让客户知道已经成功点击了。下面是js和jquery的设置方式:
应用背景
当用户需要某项功能时要填写一些表单信息,在填写完成并提交后,该部分信息是不允许再次修改的。表单包含TextBox、DropDownList、CheckBox等控件。
需求实现
第一种方案,绑定用户填写的数据时,设置控件的Enable属性为False。如果页面的表单数较少时可采用这样的方法,但是如果在表单较多的情况下则并不是更好的方法。
第二种方案,使用Foreach访问页面控件,判断类型如果是TextBox、DropDownList、CheckBox等,则设置Enable=False。代码量相比第一种方案有所减少,但,仍不是最佳的。
js设置
document.getElementById("控件ID").disabled=true; 不可编辑状态
document.getElementById("控件ID").disabled=false; 可编辑状态
第三种方案,使用Jquery即可轻松实现。
复制代码代码如下:
$("input").attr("disabled", "disabled");
//设置禁用属性
$("#takeon").attr("disabled","disabled");
//删除禁用属性,也就是元素可用
$("#takeon").removeAttr("disabled");
总结
checkbox、radio设置不可用
$(":checkbox,:radio").attr("disabled","disabled");
or $(":checkbox,:radio").attr("disabled",true);
要实现同样的功能有很多种方法,如何在特定场景中能找到更快捷更适合的那一种,这才是我们所想的。
jquery设置
由于jquery是基于js,所以按照上面的做法,应该是给元素设置或者移除disabled属性即可。
设置为不可用:
$("#input").attr("disabled",true);
$("#input").attr("disabled","disabled");
设置为不可用:
$("#input").attr("disabled",false);//
$("#input").removeAttr("disabled"); //移除属性
$("#input").attr("disabled",""); //相当于移除属性
分享到:
相关推荐
18.jQuery美化复选框Checkbox和radio单选框的插件hcheckbox示例 19.jQuery漂亮Flash卡通动感菜单示例 20.jQuery漂亮动感二级网站导航菜单源码下载 21.jquery漂亮苹果系统动画效果的导航菜单示例 22.jquery...
input type=”checkbox” value=’1′ /><label>aaaaaa</label> <input type=”checkbox” value=’2′ /><label>bbbbbb</label> <input type=”checkbox” value=’3′ /><label>ccccc</label> <...
主要思路是利用隐藏原来的checkbox和radiobox,用一个div来模拟checkbox/radiobox,并使用jQuery来完成选择切换时的动画效果。 复制代码代码如下:<ul> <li> <p>Gender:</p> </li> <li> <input type=”radio” ...
1:判断radio 代码如下: var selected = $(‘input[name=selectid:checked]’).val();//若未被选中 则val() = null if(selected == null){ alert(“未选中!”); }else{ alert(“选中!”); } 2:...
简单实用的自定义radio和checkbox
<input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/> <input type="reset" /><br/> 提交"/><br/> <input type="text" /><br/> <select><option>Option</option></select><br/> ...
<p><a href="#" id="start">Start Animation</a></p> <div id="box" style="background:#98bf21;height:100px;width:100px;position:relative"> </div> </body> </html> jQuery 隐藏和显示 通过 hide() 和 show...
jQuery select checkbox radio等基本操作,包括<div>的取值
jQuery1.2 API 中文版折叠展开折叠全部展开全部 英文说明 核心jQuery 核心函数 jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组...
早上要做一功能,checkbox被选中时,显示隐藏的层,取消选中时,再隐藏选中的层。 初始代码如下: 代码如下: $(function(){ $(“#ischange”).change(function() { alert(“checked”); }); }); 捣腾了半天...
接下来我们一起来看看实现这款美化版Checkbox的源代码,主要思路是利用隐藏原来的checkbox和radiobox,用一个div来模拟checkbox/radiobox,并使用jQuery来完成选择切换时的动画效果。 先来看看HTML代码: <div ...
(答案见下载资源) 上机任务1 ... 在chrome的控制台中输入jQuery...为某dom元素应用某css样式可以使用jQuery中的addClass方法,例如:将id为tt的div元素应用.bt样式,可用些语句:$("#tt").addClass("color","red");
最近想学者用js做适合触摸的单选(radiobox)和多选(checkbox)控件,起因是:1、不想用就jQuery,因为用它就解决这么一个问题感觉有点像大炮打蚊子;2、想用css做出toggle switch那种感觉很困难,而且这种开关只支持...
选择器速度提升 选择器的速度大幅度提高了,下表为jQuery1.1.2和1.1.3的选择器速度对比,提高了8倍多 Browser jQuery 1.1.2 jQuery 1.1.3 % Improvement IE 6 4890ms 661ms 740% Firefox 2 5629ms 567...
jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。 jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个...
-如果TreeNode的属性Enabled="false",则此项变灰并且不会被选中(feedback:your568)。 -修正TreeNode的属性NavigateUrl不接受服务器端URL(以~/开头)的BUG。 -增加Accordion和Tree配合使用的示例(other\...
-如果TreeNode的属性Enabled="false",则此项变灰并且不会被选中(feedback:your568)。 -修正TreeNode的属性NavigateUrl不接受服务器端URL(以~/开头)的BUG。 -增加Accordion和Tree配合使用的示例(other\...
React-iCheck 使用构建的组件。 没有jQuery和Zepto ...默认情况下,iCheck不为包装div提供任何CSS样式(如果不使用)。 用法 npm install react-icheck icheck --save import 'icheck/skins/all.css' ; // or singl
维克隆尼 克隆DOM元素的Vue组件 安装 yarn add vue-cloneya # or npm i vue-cloneya 进口 import Vue from 'vue' import VueCloneya from 'vue-cloneya' ...-- Only input, select, radio, checkbox etc.
{1.3.1}总结}{23}{subsection.1.3.1} {1.4}数据类型}{23}{section.1.4} {1.4.1}整数与浮点数}{23}{subsection.1.4.1} {1.4.1.1}浮点数原理}{24}{subsubsection.1.4.1.1} {1.4.2}格式化输出浮点数}{24}{...