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 相关文章推荐
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
javascript的理解及经典案例分析
May 20 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
Vue自定义指令写法与个人理解
Feb 09 Javascript
ES5和ES6中类的区别总结
Dec 21 Javascript
js Proxy的原理详解
May 25 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垃圾回收机制简单说明
2010/07/22 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
js 目录列举函数
2008/11/06 Javascript
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
承租经营合作者协议书
2014/10/01 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
行政上诉状范文
2015/05/23 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers