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 相关文章推荐
javascript打开新窗口同时关闭旧窗口
Jan 16 Javascript
js 编写规范
Mar 03 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 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 和 XML: 使用expat函数(二)
2006/10/09 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
php判断目录存在的简单方法
2019/09/26 PHP
拖动一个HTML元素
2006/12/22 Javascript
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
js中this用法实例详解
2015/05/05 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
python re模块findall()函数实例解析
2018/01/19 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
小学兴趣小组活动总结
2014/07/07 职场文书
大二学生自我检讨书
2014/10/23 职场文书
护士2014年终工作总结
2014/11/11 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
经理聘任证明
2015/03/02 职场文书
文明旅游倡议书
2015/04/28 职场文书
安全教育观后感
2015/06/17 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
法律服务所工作总结
2015/08/10 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server