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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
javascript 有趣而诡异的数组
Apr 06 Javascript
javascript 变量作用域 代码分析
Jun 26 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
Vue指令指令大全
Feb 09 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
JS常见内存泄漏及解决方案解析
May 30 Javascript
node中使用shell脚本的方法步骤
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
Phpbean路由转发的php代码
2008/01/10 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
原生js调用json方法总结
2018/02/22 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
用Python编写简单的定时器的方法
2015/05/02 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
视图的作用
2014/12/19 面试题
房屋委托书范本
2014/04/04 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
农行心得体会
2014/09/02 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
九寨沟导游词
2015/02/02 职场文书
小学教学工作总结2015
2015/05/13 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书