在网页中进行操作的时候,一个常规动作是在表单中点击按钮,但是经常会出现点了按钮以后没有反应,这个时候,
用户通常会连点几次,这个可能破坏你原来的预想,例如会导致多次提交。
通过将按钮设置为不可用可以防止这类事情发生,也可以让客户知道已经成功点击了。下面是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",""); //相当于移除属性
分享到:
相关推荐
本教程将重点讲解如何使用div元素模拟radio和checkbox,并结合jQuery特效来提升用户体验。 1. CSS模拟radio和checkbox - 首先,我们需要创建一组div元素,通过CSS设置背景图片或者伪类(如`:checked`)来实现选中...
总结,jQuery 提供了简洁的API来处理`checkbox`和`radio`的选中状态判断和操作,使得开发者能够轻松地实现各种交互功能。在实际应用中,可以结合HTML和CSS构建出丰富的表单界面,并利用jQuery增强用户体验。理解并...
在本文中,我们将深入探讨如何使用jQuery来实现自定义的checkbox和radio样式。这个方法主要基于HTML、CSS和JavaScript的组合,尤其是jQuery库,来创建美观且可定制的复选框和单选按钮。 首先,我们需要理解实现这种...
JQuery 是一个广泛使用的 JavaScript 库,极大地简化了网页中的 DOM 操作、事件处理和动画效果。本篇文章将深入探讨 `jQuery` 中的一些常用查询和功能。 ### 1. jQuery 核心方法 `$` 是 jQuery 类的一个别名,`$()...
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> <...
本文主要介绍 Jquery Mobile 中的 UI 组件,包括单选框、多选框和下拉列表,并对它们的使用方法、配置选项、API 方法以及事件进行了详细介绍。 #### 二、单选框(Radio Buttons) **2.1 范例代码** ```html ...
主要思路是利用隐藏原来的checkbox和radiobox,用一个div来模拟checkbox/radiobox,并使用jQuery来完成选择切换时的动画效果。 复制代码代码如下:<ul> <li> <p>Gender:</p> </li> <li> <input type=”radio” ...
本文将对jQuery的日常使用进行总结,包括如何引入jQuery库、页面加载事件、事件处理、DOM操作、表单元素的检查与交互,以及提示信息的展示。 1. **引入jQuery库**: 要使用jQuery,首先需要在HTML文件中引入jQuery...
<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...
jQuery1.2 API 中文版折叠展开折叠全部展开全部 英文说明 核心jQuery 核心函数 jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组...
6. **表单选择器**: 专门用于选择表单元素,如 `:input`, `:checkbox`, `:radio`, `:selected` 和 `:checked`: ```javascript $(":input"); // 所有输入元素 $("input[type='radio']:checked"); // 选中的radio...
早上要做一功能,checkbox被选中时,显示隐藏的层,取消选中时,再隐藏选中的层。 初始代码如下: 代码如下: $(function(){ $(“#ischange”).change(function() { alert(“checked”); }); }); 捣腾了半天...
(答案见下载资源) 上机任务1 ... 在chrome的控制台中输入jQuery...为某dom元素应用某css样式可以使用jQuery中的addClass方法,例如:将id为tt的div元素应用.bt样式,可用些语句:$("#tt").addClass("color","red");
接下来我们一起来看看实现这款美化版Checkbox的源代码,主要思路是利用隐藏原来的checkbox和radiobox,用一个div来模拟checkbox/radiobox,并使用jQuery来完成选择切换时的动画效果。 先来看看HTML代码: <div ...
jQuery还提供了针对表单元素的选择器,如`:input`选取所有输入元素,`:password`选取密码框,`:text`选取单行文本框,`:radio`选取单选按钮,`:checkbox`选取复选框,`:checked`选取选中的`checkbox`和`radio`,`:...