`
Sobfist
  • 浏览: 31485 次
  • 性别: 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",""); //相当于移除属性
分享到:
评论

相关推荐

    div模拟radio和checkbox

    本教程将重点讲解如何使用div元素模拟radio和checkbox,并结合jQuery特效来提升用户体验。 1. CSS模拟radio和checkbox - 首先,我们需要创建一组div元素,通过CSS设置背景图片或者伪类(如`:checked`)来实现选中...

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

    总结,jQuery 提供了简洁的API来处理`checkbox`和`radio`的选中状态判断和操作,使得开发者能够轻松地实现各种交互功能。在实际应用中,可以结合HTML和CSS构建出丰富的表单界面,并利用jQuery增强用户体验。理解并...

    jQuery实现自定义checkbox和radio样式

    在本文中,我们将深入探讨如何使用jQuery来实现自定义的checkbox和radio样式。这个方法主要基于HTML、CSS和JavaScript的组合,尤其是jQuery库,来创建美观且可定制的复选框和单选按钮。 首先,我们需要理解实现这种...

    jquery常用查询总结

    JQuery 是一个广泛使用的 JavaScript 库,极大地简化了网页中的 DOM 操作、事件处理和动画效果。本篇文章将深入探讨 `jQuery` 中的一些常用查询和功能。 ### 1. jQuery 核心方法 `$` 是 jQuery 类的一个别名,`$()...

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

    Jquery mobile UI组件详解

    本文主要介绍 Jquery Mobile 中的 UI 组件,包括单选框、多选框和下拉列表,并对它们的使用方法、配置选项、API 方法以及事件进行了详细介绍。 #### 二、单选框(Radio Buttons) **2.1 范例代码** ```html ...

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

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

    jQuery日常使用总结

    本文将对jQuery的日常使用进行总结,包括如何引入jQuery库、页面加载事件、事件处理、DOM操作、表单元素的检查与交互,以及提示信息的展示。 1. **引入jQuery库**: 要使用jQuery,首先需要在HTML文件中引入jQuery...

    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完全实例.rar

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

    jQuery基础和jQuery选择器教程

    6. **表单选择器**: 专门用于选择表单元素,如 `:input`, `:checkbox`, `:radio`, `:selected` 和 `:checked`: ```javascript $(":input"); // 所有输入元素 $("input[type='radio']:checked"); // 选中的radio...

    JQuery触发radio或checkbox的change事件

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

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

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

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

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

    JQuery 部分常用方法速查

    jQuery还提供了针对表单元素的选择器,如`:input`选取所有输入元素,`:password`选取密码框,`:text`选取单行文本框,`:radio`选取单选按钮,`:checkbox`选取复选框,`:checked`选取选中的`checkbox`和`radio`,`:...

Global site tag (gtag.js) - Google Analytics