jQuery设置单选按钮radio选中/不可用的实例代码


Posted in Javascript onJune 24, 2016

因为本 part 是“jQuery日常使用篇”,所以都是由具体需求出发,总结需要用到的知识点。代码写得未必很好,达到目标就好。那么我们先来看看这次的需求:色块模式基于彩色模式,即开了彩色才能开色块,彩色处于关闭的时候色块不可用,开启彩色时色块radio可用,关闭彩色时如果色块处于开的话需要把它关掉,大概就这样。

我们先来看看演示效果:

jQuery设置单选按钮radio选中/不可用的实例代码

我们接下来看看jQuery对单选按钮 radio 的操作。

1. 彩色处于关闭的时候色块不可用

需要两步,当页面打开时,检测如果彩色关闭的话,让色块的“开”不可用:

if($("#coloroff[checked]"))
{
//alert("Hello Nowamagic!");
$("#blockon").attr("disabled", true);
}

另外,当彩色开关切换时,即从开切换关时,让色块开不可用,同时选中色块关:

$("#coloroff").change(function(){
$("#blockon").attr("disabled", true);
$("#blockoff").attr("checked",true);
})

2. 当彩色从关切换开时,让色块可用,这很简单:

$("#coloron").change(function(){
$("#blockon").attr("disabled", false);
})

全部代码为:

$(document).ready(function(){
if($("#coloroff[checked]"))
{
//alert("Hello Nowamagic!");
$("#blockon").attr("disabled", true);
}
$("#coloroff").change(function(){
$("#blockon").attr("disabled", true);
$("#blockoff").attr("checked",true);
})
$("#coloron").change(function(){
$("#blockon").attr("disabled", false);
})
});

补充几个知识点:

checkbox, radio 这些控件都没有readonly属性,需要用 disabled 属性来切换它们的“可用/不可用”状态。

设置 radio 不可用可以用 attr() 方法,即attr("disabled", true)。

设置 radio 的选中状态也是用 attr() 方法,attr("checked",true)。

以上所述是小编给大家介绍的jQuery设置单选按钮radio选中/不可用的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个js实现的所谓的滑动门
May 23 Javascript
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
cookie的secure属性详解
Apr 08 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
微信小程序webview 脚手架使用详解
Jul 22 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
JS原生实现轮播图的几种方法
Mar 23 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 #Javascript
jQuery模仿单选按钮选中效果
Jun 24 #Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 #Javascript
jQuery如何获取动态添加的元素
Jun 24 #Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 #Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 #Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 #Javascript
You might like
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
orm获取关联表里的属性值
2016/04/17 PHP
详解php中 === 的使用
2016/10/24 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
Python 实现还原已撤回的微信消息
2019/06/18 Python
电子狗项圈:eDog Australia
2019/12/04 全球购物
社区十八大感言
2014/01/19 职场文书
幼师求职自荐信范文
2014/01/26 职场文书
导游个人求职信
2014/04/25 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
庆六一活动总结
2014/08/29 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
五四青年节活动总结
2015/02/10 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
公司出差管理制度范本
2015/08/05 职场文书
给numpy.array增加维度的超简单方法
2021/06/02 Python
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS