`
Sobfist
  • 浏览: 30597 次
  • 性别: Icon_minigender_1
  • 来自: 邯郸
社区版块
存档分类
最新评论

jquery checkbox radio a div 设置不可用/变灰的方法总结

阅读更多

在网页中进行操作的时候,一个常规动作是在表单中点击按钮,但是经常会出现点了按钮以后没有反应,这个时候,

用户通常会连点几次,这个可能破坏你原来的预想,例如会导致多次提交。

通过将按钮设置为不可用可以防止这类事情发生,也可以让客户知道已经成功点击了。下面是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",""); //相当于移除属性
分享到:
评论

相关推荐

    JQuery&CSS;&CSS;+DIV实例大全.rar

    18.jQuery美化复选框Checkbox和radio单选框的插件hcheckbox示例 19.jQuery漂亮Flash卡通动感菜单示例 20.jQuery漂亮动感二级网站导航菜单源码下载 21.jquery漂亮苹果系统动画效果的导航菜单示例 22.jquery...

    使用jquery与图片美化checkbox和radio控件的代码(打包下载)

    input type=”checkbox” value=’1′ /><label>aaaaaa</label> <input type=”checkbox” value=’2′ /><label>bbbbbb</label> <input type=”checkbox” value=’3′ /><label>ccccc</label> <...

    css3和jquery实现自定义checkbox和radiobox组件

    主要思路是利用隐藏原来的checkbox和radiobox,用一个div来模拟checkbox/radiobox,并使用jQuery来完成选择切换时的动画效果。 复制代码代码如下:<ul> <li> <p>Gender:</p> </li> <li> <input type=”radio” ...

    jquery checkbox,radio是否选中的判断代码

    1:判断radio 代码如下: var selected = $(‘input[name=selectid:checked]’).val();//若未被选中 则val() = null if(selected == null){ alert(“未选中!”); }else{ alert(“选中!”); } 2:...

    div模拟radio和checkbox

    简单实用的自定义radio和checkbox

    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/> ...

    jQuery详细教程

    <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 常用操作

    jQuery select checkbox radio等基本操作,包括<div>的取值

    jQuery完全实例.rar

    jQuery1.2 API 中文版折叠展开折叠全部展开全部 英文说明 核心jQuery 核心函数 jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组...

    JQuery触发radio或checkbox的change事件

    早上要做一功能,checkbox被选中时,显示隐藏的层,取消选中时,再隐藏选中的层。 初始代码如下: 代码如下: $(function(){ $(“#ischange”).change(function() { alert(“checked”); }); }); 捣腾了半天...

    jQuery CSS3自定义美化Checkbox实现代码

    接下来我们一起来看看实现这款美化版Checkbox的源代码,主要思路是利用隐藏原来的checkbox和radiobox,用一个div来模拟checkbox/radiobox,并使用jQuery来完成选择切换时的动画效果。 先来看看HTML代码: <div ...

    jQuery选择器上机练习题及答案.rar

    (答案见下载资源) 上机任务1 ... 在chrome的控制台中输入jQuery...为某dom元素应用某css样式可以使用jQuery中的addClass方法,例如:将id为tt的div元素应用.bt样式,可用些语句:$("#tt").addClass("color","red");

    自制单选(radiobox)和多选(checkbox)控件

    最近想学者用js做适合触摸的单选(radiobox)和多选(checkbox)控件,起因是:1、不想用就jQuery,因为用它就解决这么一个问题感觉有点像大炮打蚊子;2、想用css做出toggle switch那种感觉很困难,而且这种开关只支持...

    jquery-1.1.3 效率提高800%

    选择器速度提升 选择器的速度大幅度提高了,下表为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...

    jQuety1.3中文说明

    jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。 jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个...

    ExtAspNet_v2.3.2_dll

    -如果TreeNode的属性Enabled="false",则此项变灰并且不会被选中(feedback:your568)。 -修正TreeNode的属性NavigateUrl不接受服务器端URL(以~/开头)的BUG。 -增加Accordion和Tree配合使用的示例(other\...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -如果TreeNode的属性Enabled="false",则此项变灰并且不会被选中(feedback:your568)。 -修正TreeNode的属性NavigateUrl不接受服务器端URL(以~/开头)的BUG。 -增加Accordion和Tree配合使用的示例(other\...

    react-icheck:使用React构建的iCheck组件。 高度可定制的复选框,单选按钮和单选组

    React-iCheck 使用构建的组件。 没有jQuery和Zepto ...默认情况下,iCheck不为包装div提供任何CSS样式(如果不使用)。 用法 npm install react-icheck icheck --save import 'icheck/skins/all.css' ; // or singl

    vue-cloneya:一个Vue.js 2组件来克隆DOM元素

    维克隆尼 克隆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.

    Java学习笔记-个人整理的

    {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}{...

Global site tag (gtag.js) - Google Analytics